/* ff-mobile.css — the Yahoo-style MOBILE app shell for the draft room. --------------------------------------------------------------------------- Shared by admin/ff-draft-room.html and my/draft-room.html so the two surfaces can never drift. EVERY rule in this file lives inside @media(max-width:768px) except the two `display:none` defaults below, so the desktop draft room is byte-for-byte the layout it has always been. The shape it builds: a full-screen app — compact header, ONE full-height screen at a time, and a bottom tab bar. Which screen shows is driven by `data-mtab` on (set by ff-mobile.js), so switching tabs is a CSS state change, not a re-render. ── COLLAPSED CHROME (v1.2.0) ───────────────────────────────────────────── On a phone the ONLY thing that matters is the player list, so everything above it is collapsed by default and opened on a tap. Three sections, each a `data-ffsec-` attribute on written by ff-mobile.js: controls — the League/coach selects + the start/sim/auto buttons coach — the coach's reasoning (the collapsed line still NAMES the pick) filters — the search box, the board-source chips and "hide drafted" What stays visible: one thin status strip (round · pick · on the clock, plus the one contextual action) and the position-filter chips. Measured at 390x844: the list went from 349px (41%) to 601px (71%) of the viewport. Everything here is display-only — collapsing never re-renders, so the draft, the scroll position and the search text survive a toggle. ── THE LAYOUT GOTCHA THIS FILE EXISTS TO SURVIVE ────────────────────────── A stretched flex item's cross size is floored at its CONTENT min-width in Chrome. The player table is 1240px wide by design, so every ancestor in the flex chain inherited a 1240px minimum and inflated the LAYOUT VIEWPORT — the page rendered zoomed out and the Draft button sat off-screen. Hence the `min-width:0;max-width:100%` rule on every direct child of the chain, and `table.pt{min-width:0}`. Verify a change here with window.innerWidth on a 390px viewport: it must stay 390. --------------------------------------------------------------------------- */ /* off on desktop — the whole shell is opt-in at ≤768px */ .mobnav{ display:none; } .mobsub{ display:none; } /* the collapse toggles, the phone-only contextual action button and the short phone labels ("R1/15" for "Round 1/15") — all invisible above 768px, so the desktop room renders the exact markup it always did */ .ffmtoggle{ display:none; } .cbtoggle{ display:none; } .ffmact{ display:none; } .ffmt{ display:none; } @media(max-width:768px){ /* ── app frame: header / one screen / tab bar, no page scroll ──────────── */ html{ height:100%; } body{ display:flex; flex-direction:column; height:100dvh; min-height:100dvh; overflow:hidden; -webkit-tap-highlight-color:transparent; } body>*{ min-width:0; max-width:100%; } .layout{ flex:1 1 auto; height:auto; min-height:0; overflow:hidden; } .layout>*{ min-width:0; max-width:100%; } .main{ min-width:0; min-height:0; overflow:hidden; } .main>*{ min-width:0; max-width:100%; } .topbar{ flex:none; padding:8px 12px 6px; } .topbar h1{ font-size:17px; white-space:nowrap; } .topbar .sub{ display:none; } /* The admin shell injects a generic "search the visible table rows" box into the topbar. On a phone it wraps the title onto two lines and costs ~60px of the draft, and the room already has its own player search — which filters the whole board, not just the rendered rows. Phone only. */ #pa-search{ display:none; } /* The user shell's "confirm your email" banner is built with INLINE styles (30px side margins, 12px padding, 13.5px text) — it wrapped to three lines and cost 140px, a sixth of the phone, which measured the draft list down to 53% on a day-one account. !important is the only thing that beats an inline style, and the banner has to stay (an unverified account is a real state the owner needs told about) — so it is compacted, not hidden. */ #uVerifyBar{ margin:0 0 7px !important; padding:7px 10px !important; font-size:11.5px !important; gap:8px !important; flex:none; } #uVerifyBar>span:first-child{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0; } #uVerifyBar .btn{ padding:4px 9px; font-size:11.5px; } .content{ flex:1 1 auto; min-height:0; max-width:100%; padding:8px 10px 0; display:flex; flex-direction:column; overflow:hidden; } .content>*{ flex:none; min-width:0; max-width:100%; } /* ── the controls block stays pinned under the header, horizontally scrolled ── */ .ffcontrols{ padding:7px 8px; margin-bottom:7px; display:flex; flex-direction:column; } .ffctlrow,.ffbtnrow,.ffstatusrow,.ffrow{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .ffctlrow::-webkit-scrollbar,.ffbtnrow::-webkit-scrollbar, .ffstatusrow::-webkit-scrollbar,.ffrow::-webkit-scrollbar{ display:none; } .ffctlrow>*,.ffbtnrow>*,.ffstatusrow>*,.ffrow>*{ flex:none; white-space:nowrap; } .ffctlrow label{ font-size:11px; } /* the League/coach pickers are 190px on desktop — two of them do not fit a 390px screen, so the phone caps them and both stay on one line */ select.ffsel{ min-width:0; max-width:152px; padding-top:.3rem; padding-bottom:.3rem; font-size:13px; } /* ── the ONE strip that never collapses ──────────────────────────────── Order is set here, not in the DOM: the strip is authored after the control row (so desktop keeps its layout) but has to sit ABOVE it on the phone, or opening ⚙ Controls would shove the strip you just tapped down the screen. */ .ffstatusrow{ order:1; margin-top:0; padding:0; background:none; gap:7px; font-size:12px; align-items:center; } .ffctlrow{ order:2; margin-top:8px; } .ffcontrols>*:not(.ffstatusrow):not(.ffctlrow){ order:3; } /* the phone-only contextual action (Start draft / Sim to my pick) leads the strip — it is the button you press over and over, so it gets the thumb */ .ffmact{ display:inline-flex; order:-2; padding:5px 10px; font-size:12px; } .ffmtoggle[data-ffsec="controls"]{ order:-1; } .ffs-overall,.ffs-fmt{ display:none; } /* said again inside ⚙ Controls */ /* "Round 3/15 · Pick 7 · On the clock: YOU" is 260px of words on a 390px screen — the phone says "R3/15 · P7 · YOU" and keeps the badge visible */ .ffdt{ display:none; } .ffmt{ display:inline; } .ffs-round,.ffs-pick{ color:var(--muted); } .ffs-round b,.ffs-pick b{ color:var(--text); } /* everything the ⚙ toggle owns */ body:not([data-ffsec-controls="1"]) .ffctlrow, body:not([data-ffsec-controls="1"]) .ffcontrols>*:not(.ffstatusrow):not(.ffctlrow){ display:none; } /* the coach's verdict on your pick used to sit in the strip and either got truncated or pushed the badges off-screen; as a fixed card above the tab bar it costs the list nothing and is finally readable */ #flash{ position:fixed; left:8px; right:8px; bottom:calc(62px + env(safe-area-inset-bottom)); z-index:70; margin:0; padding:9px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--border); box-shadow:0 8px 22px rgba(0,0,0,.45); font-size:12.5px; line-height:1.35; white-space:normal; } #flash:empty{ display:none; } /* ── the collapse toggles ─────────────────────────────────────────────── */ .ffmtoggle{ display:inline-flex; align-items:center; gap:5px; flex:none; padding:5px 9px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:11.5px; font-weight:700; line-height:1.2; white-space:nowrap; cursor:pointer; } /* lucide, not an emoji: the toggles are the only always-visible chrome left, and an emoji font is not something a phone (or a QC screenshot) is owed */ .ffmtoggle svg{ width:13px; height:13px; flex:none; } .cbtoggle svg{ width:16px; height:16px; flex:none; color:var(--accent); } .ffmtoggle .chev,.cbtoggle .chev{ display:inline-block; font-size:10px; transition:transform .15s; } body[data-ffsec-controls="1"] .ffmtoggle[data-ffsec="controls"], body[data-ffsec-filters="1"] .ffmtoggle[data-ffsec="filters"]{ background:var(--brand); border-color:var(--brand); color:var(--bg); } body[data-ffsec-controls="1"] .ffmtoggle[data-ffsec="controls"] .chev, body[data-ffsec-filters="1"] .ffmtoggle[data-ffsec="filters"] .chev, body[data-ffsec-coach="1"] .cbtoggle .chev{ transform:rotate(180deg); } /* ── tab visibility: exactly one screen ───────────────────────────────── */ /* align-items:stretch is NOT the default here — the desktop rule sets `start`, which as a flex value means flex-start and left the side panels sized to their text (a 259px card on a 370px screen). */ .ffgrid{ display:flex; flex-direction:column; align-items:stretch; gap:0; flex:1 1 auto; min-height:0; overflow:hidden; } .ffgrid>*{ min-width:0; max-width:100%; } .ffcol-main,.ffcol-side{ display:none; } .ffcol-main>*,.ffcol-side>*{ min-width:0; max-width:100%; } body[data-mtab="players"] .ffcol-main{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; } body[data-mtab="players"] .p-board{ display:none; } body[data-mtab="players"] .p-players{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; } body[data-mtab="board"] .ffcol-main{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow-y:auto; } body[data-mtab="board"] .p-players{ display:none; } body[data-mtab="board"] .p-board{ display:block; margin-top:0; } body[data-mtab="team"] .ffcol-side, body[data-mtab="picks"] .ffcol-side, body[data-mtab="coach"] .ffcol-side{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow-y:auto; gap:10px; } .ffcol-side>.panel{ display:none; flex:none; } body[data-mtab="team"] .p-roster{ display:block; } body[data-mtab="picks"] .p-log{ display:block; } body[data-mtab="coach"] .p-coachpanel, body[data-mtab="coach"] .p-ba{ display:block; } .scrollbox{ max-height:none; overflow:visible; } /* ── the live pick ticker ─────────────────────────────────────────────── Same rule as the coach bar: it belongs to the Players and Coach screens and is hidden on the other three, because on the Players screen every px it takes comes off the list (the ≥60%-of-viewport contract at the top of this file). One line, no wrap, ellipsis on the player name — the pick number, who is picking, who they took and the countdown all fit 390px once the decorative words go. */ .fflive{ display:none; flex:none; padding:6px 10px; margin-bottom:7px; gap:6px; font-size:12.5px; flex-wrap:nowrap; overflow:hidden; } body[data-mtab="players"] .fflive, body[data-mtab="coach"] .fflive{ display:flex; } /* the words the 390px line cannot afford: the team abbreviation is already on the struck row underneath, "selects" becomes an arrow, and the running countdown goes entirely — the pulsing dot is the same information */ .fflive .tm{ display:none; } .fflive .next.run{ display:none; } .fflive .verb{ font-size:0; } .fflive .verb::after{ content:"→"; font-size:13px; color:var(--muted); } .fflive .who{ font-size:11.5px; white-space:nowrap; } .fflive .pl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .fflive .next{ font-size:10px; } .fflivetog{ align-self:center; } /* the coach's call and the final standings belong to the Players + Coach screens */ .coachbar{ display:none; padding:8px 11px; margin-bottom:7px; } body[data-mtab="players"] .coachbar, body[data-mtab="coach"] .coachbar{ display:block; } /* Collapsed, the coach is ONE line — but that line always names the player he is calling, because "who does the coach want" is the whole reason the panel exists; the why/alternatives are a tap away. */ .cbtoggle{ display:flex; align-items:center; gap:6px; width:100%; background:none; border:0; padding:0; margin:0; text-align:left; color:var(--text); font-size:13px; font-weight:700; line-height:1.3; cursor:pointer; overflow:hidden; } .cbtoggle .cbname{ color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cbtoggle .chev{ margin-left:auto; color:var(--muted); } body:not([data-ffsec-coach="1"]) .cbbody{ display:none; } body[data-ffsec-coach="1"] .cbbody{ margin-top:7px; } /* the body's own bold heading is the sentence the collapsed line already said ("Training as Elite-QB"); on a phone that is 30px spent twice */ .cbbody>b:first-child{ display:none; } /* on the Coach tab the panel IS the screen — never make the user open it twice */ body[data-mtab="coach"] .cbbody{ display:block; margin-top:7px; } body[data-mtab="coach"] .cbtoggle{ display:none; } .p-results{ display:none; } body[data-mtab="players"] .p-results, body[data-mtab="coach"] .p-results{ display:block; max-height:42vh; overflow:auto; } /* ── players screen: internal scroller + a slimmed, touch-sized table ──── */ /* `input.` (not `.ffsearch`) on purpose: the field also carries Tailwind's .text-sm, and the CDN injects its stylesheet AFTER this file — an equal- specificity rule would lose and iOS would zoom on focus. */ input.ffsearch{ flex:none; width:42vw; min-width:0; font-size:16px; } /* ── the filter bar: chips stay, everything else is behind 🔍 ─────────── The position chips are the one control used mid-draft ("show me the RBs"), so they earn their 40px. The search box, the board-source chips and the hide-drafted checkbox are all opened together by the 🔍 toggle. */ .p-players>.ffrow{ flex:none; padding:7px 8px; gap:6px; } .p-players .chipbtn{ padding:5px 9px; font-size:11.5px; } body:not([data-ffsec-filters="1"]) .p-players .ffsrcrow, body:not([data-ffsec-filters="1"]) .p-players input.ffsearch, body:not([data-ffsec-filters="1"]) .p-players .ffhd{ display:none; } /* open: the search box takes the rest of the toggle's line and the chips wrap under it, so nothing important sits off the right edge */ body[data-ffsec-filters="1"] .p-players .ffrow.tight{ flex-wrap:wrap; overflow-x:visible; } body[data-ffsec-filters="1"] .p-players input.ffsearch{ flex:1 1 140px; width:auto; } .tablewrap{ flex:1 1 auto; min-height:0; max-height:none; } table.pt{ min-width:0; width:100%; } table.pt th,table.pt td{ padding:9px 5px; } table.pt .c-adp,table.pt .c-src,table.pt .c-tier,table.pt .c-team, table.pt .c-bye,table.pt .c-proj,table.pt .c-off,table.pt .c-role, table.pt .note{ display:none; } /* every px trimmed off the fixed columns is a px the name + its second line gets, which is what keeps most rows to ONE sub-line instead of two */ table.pt .c-rank{ padding-left:8px; padding-right:2px; } table.pt .c-pos,table.pt .c-vor{ padding-left:3px; padding-right:3px; } table.pt .c-name{ white-space:normal; } table.pt .c-vor{ font-size:12px; } table.pt td.act{ padding-left:4px; padding-right:8px; } .mobsub{ display:block; font-size:11px; font-weight:400; line-height:1.25; color:var(--muted); margin-top:2px; white-space:normal; } table.pt td.act .btn{ padding:9px 13px; font-size:13px; border-radius:9px; } /* ── bottom tab bar ───────────────────────────────────────────────────── */ .mobnav{ display:flex; flex:none; background:var(--surface); border-top:1px solid var(--border); padding:4px 4px calc(4px + env(safe-area-inset-bottom)); z-index:60; } .mobnav .mt{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; border-radius:10px; padding:6px 2px; font-size:10px; font-weight:700; color:var(--muted); cursor:pointer; line-height:1.1; } .mobnav .mt i,.mobnav .mt svg{ width:21px; height:21px; } .mobnav .mt.active{ color:var(--accent); } .mobnav .mt.onclock{ color:var(--warn); } .mobnav .mt.onclock svg{ animation:ffmnpulse 1s infinite; } @keyframes ffmnpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.28); } } }