/* ============================================================================= 100-shelf-header.css — v16.136 THE SHELF HEADER'S GEOMETRY. ONE OWNER. NO CASCADE BATTLE. WHAT THIS FILE IS FOR Every size, space and box value for the two rows that make up the shelf header — the category strip (#mylist-header: GAMES · ANIME · MANGA · MUSIC · MOVIES · TV) and the status row (#mylist-toolbar: Watching · Planning · Watched · Paused, plus the search and sort chips). If you want either row taller, tighter, closer together, or the labels bigger, THIS IS THE ONLY FILE TO EDIT. There is no second rule anywhere that fights these values, which is the entire point of the file existing. --------------------------------------------------------------------------- WHY IT EXISTS Before v16.136 this region's geometry was set by 64 rules spread across ten stylesheets (06, 10, 11, 12, 17b, 34b, 35, 43, 44, 98). The status pill's height alone was declared eight times, its font-size seven; the winner was decided by load order and by whether a selector happened to carry a `body:not(.true-dark-mode)` prefix — and since true-dark IS the shipping theme, roughly half of those declarations were dead code that still had to be read and reasoned about by anyone touching the row. Changing one number meant finding which of eight rules was currently winning. All 64 were deleted and their surviving values collapsed into the blocks below, taken from the live computed styles so the starting point is exactly what shipped. --------------------------------------------------------------------------- TWO RULES FOR EDITING THIS FILE 1. NO `!important`. Nothing competes with these declarations any more, so they win on specificity alone. If you find yourself reaching for it, a duplicate has crept back in somewhere — delete that instead. 2. This file owns GEOMETRY ONLY. Colour, background, border, shadow and the active-state treatment still live in their original files, and the state rules that collapse the tabs when search opens (`.tabs.is-search-open .tab-btn` in 35-shelf-banner.css) are deliberately left alone — they are behaviour, and they are meant to outrank this. Sticky/pinned behaviour and the pinned chrome are NOT here either; they are 98-shelf-sticky-header.css, which stays a single-purpose file. ============================================================================= */ /* ------------------------------------------------- 0. THE ROW RHYTHM + LINES THE SPEC (owner, v16.138) ---- line ---- 6px CATEGORY text band 6px ---- line ---- 6px STATUS text band Both bands are the same height, so both sections are the same height, and every line clears the text it sits next to by the same --shelf-row-gap. HOW IT IS BUILT, AND WHY IT CANNOT DRIFT The gap is the BUTTON'S OWN PADDING and each line is drawn by the row it belongs to, at that row's top edge. So "3px from the text" is structural: the line is at the row edge, the padding is the only thing between it and the band, and nothing upstream can move one without moving the other. That is the actual fix here. The old line above the category row was a decorative
inside the profile block, and its clearance was the sum of that block's height, a 20px margin and the header's -32px pull. It could not express a 3px target and measured 5px INSIDE the category text row — the line ran through the labels. The two lines also disagreed on everything they could: 412px wide vs 430px, rgba(255,255,255,0.11) vs rgba(196,181,253,0.18), one full-bleeding by negative margins and the other by 100vw. Because the whole section is the button box, the band is what the eye reads but the BUTTON is what the finger gets — the tap target is the full section, not the 22px band. */ #mylist-view #mylist-header.mylist-section-card, #mylist-view #mylist-toolbar.toolbar { /* --shelf-row-gap : clearance from a line to the text beside it --shelf-row-band : the text band itself section height = band + 2 x gap, identical for both rows */ /* v16.139 (owner): 3px -> 6px. */ --shelf-row-gap: 6px; --shelf-row-band: 16px; /* THE CATEGORY UNDERLINE, and the one place the two rows deliberately differ. v16.145. The two indicators are no longer the same shape, so they no longer need the same room. The status row's pill is centred ON the label and lives inside the band; the category row's underline sits BELOW the band and needs its own lane. --shelf-cat-tail is that lane: 2px of extra padding on the bottom of the category button only. The full stack under the category text is therefore 3px (--shelf-underline-gap) + 2px (--shelf-underline-h) + 3px + 1px midline = 9px to the hairline, against the 6px the text keeps ABOVE its own line. Without the tail the underline would clear the hairline by 2px and read as part of it. Nothing above the text moved. */ --shelf-cat-tail: 2px; --shelf-underline-gap: 3px; --shelf-underline-h: 2px; /* HOW FAR THE TOP HAIRLINE SITS ABOVE THE CATEGORY SECTION. v16.148 (owner): 1px -> 4px, i.e. the line lifted 3px. It is a variable and not a literal because 98-shelf-sticky-header.css has to start the PINNED fill at the same height: pinned, anything above that fill has cards scrolling behind it, so a line lifted here and a fill left at -1px would put 3px of moving artwork directly under the hairline. One number, both files. */ --shelf-topline-lift: 4px; /* The search + sort chips in the status row, at their original 36px. They are DELIBERATELY taller than the 28px row and overflow it by 4px top and bottom; see the note on the hairline below for why that is fine and how it is handled. --shelf-chip-gap is the space between the two of them, and the reserved lane on .tabs is derived from both so the three can never disagree. */ --shelf-chip: 36px; --shelf-chip-gap: 8px; position: relative; } /* The top line hangs off the CATEGORY ROW, not off #mylist-header, and that is deliberate. The header is a grid whose first row is #mylist-edit-controls — owner-only UI that appears and disappears. Anchored to the header, the line would sit above those controls when they render and 3px above the text when they do not; anchored to the row it labels, it is 3px above the text always. */ #mylist-view #mylist-header .mylist-categories-section { position: relative; } /* NOTE: an empty #mylist-edit-controls is collapsed by 11-patch-notes-friends-refinements.css, which already had a `:empty` rule for exactly that — it was simply being outranked by a later rule in the same file that turned `display: flex` back on. Fixed there rather than restated here; a second collapse rule in this file would have been the duplicate the whole consolidation exists to remove. */ /* THE TWO LINES. Each is drawn at the top edge of its own row: above the category row, and between the rows. There is deliberately no third line under the status row — the cards start there, and the pinned header draws its own bottom edge (98-shelf-sticky-header). Everything they SHARE is stated once, below, so the pair can never drift on shape, reach or stacking. Only the two things the owner has asked to differ — offset and colour — are restated per line, and they are the last two rules in this block so it is obvious at a glance what is and is not common. left:50% + 100vw + -50vw reaches both screen edges from inside the container's 9px gutters. It works here only because the paint containment that used to clip it was released on #mylist-header in 98-shelf-sticky-header.css; before that, a full-bleed line on the header rendered but was clipped back to the gutters, which is why the old one had to live on a different element. */ #mylist-view #mylist-header .mylist-categories-section::before, #mylist-view #mylist-toolbar.toolbar::before { content: ''; display: block; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; height: 1px; pointer-events: none; } /* TOP LINE — above the category strip. v16.148: lifted 3px and recoloured from the lavender to plain white at 18%. */ #mylist-view #mylist-header .mylist-categories-section::before { top: calc(-1 * var(--shelf-topline-lift)); background: rgba(255, 255, 255, 0.18); } /* MIDDLE LINE — between the category strip and the status row. Still lavender, and still at -1px, which is deliberate and not an oversight: -1px rather than 0 keeps the line fully ABOVE the row it belongs to, so the whole --shelf-row-gap is clear beneath it. At top:0 the line's own pixel eats into that gap and the status text clears it by one pixel less than the category text does. */ #mylist-view #mylist-toolbar.toolbar::before { top: -1px; background: rgba(196, 181, 253, 0.18); } /* -------------------------------------------------------- 1. CATEGORY STRIP */ #mylist-view #mylist-header.mylist-section-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; column-gap: 12px; row-gap: 4px; /* No vertical padding: the row's height IS the button's, so the line drawn at this element's top edge lands exactly one --shelf-row-gap above the text. */ padding: 0 7px; /* Bottom margin is 0 ON PURPOSE and must stay 0: the category strip and the status row pin as ONE header, so anything here becomes a slit between two stuck rows that cards scroll through. See 98-shelf-sticky-header.css. */ margin: 0; } /* Lifts the strip up under the profile block above it. Only on your own shelf — a shelf you are VIEWING has no such block to pull into. v16.138: -32px -> +17px, and it is a normal gap now rather than a pull. The -32px only ever made sense against the deleted
, which occupied 21px above this row (a 20px top margin plus its own 1px) and drew the line 3px up from its own top. The header pulled back up through that block, which is precisely why the line ended up 5px INSIDE the category text instead of above it — the two were measured from different things. With the line drawn by this row, the offset just sets the gap above it: 11px measured 16px from the hairline to the bottom of the Profile / Review / Game Clips buttons, matching the 16px rhythm those buttons already use above themselves. v16.148 lifted the line 3px (--shelf-topline-lift), so that clearance now reads 13px; the margin itself is unchanged. MEASURE THIS WITH THE PIN SENTINEL PRESENT. js/98-shelf-sticky-header.js inserts a 1px
immediately before this element, and a sibling there stops this margin collapsing the way it otherwise would — the same value measures 6px larger with the sentinel than without. A harness that omits it will calibrate this number wrong. */ body.main-tab-mylist:not(.viewing-other-user) #mylist-view #mylist-header.mylist-section-card { margin-top: 11px; } body.viewing-other-user #mylist-view #mylist-header.mylist-section-card { margin-top: 0; } /* The category buttons take the same rhythm as the status row, plus the tail the underline needs. Both rows are still band + 2 x gap by construction; the tail is the single, named 2px of difference. */ #mylist-view #mylist-header .section-btn { height: calc(var(--shelf-row-band) + 2 * var(--shelf-row-gap) + var(--shelf-cat-tail)); min-height: 0; padding: var(--shelf-row-gap) 4px calc(var(--shelf-row-gap) + var(--shelf-cat-tail)); line-height: var(--shelf-row-band); } /* THE ACTIVE CATEGORY'S UNDERLINE. v16.145: moved here from 19-add-shelf-discovery-filters.css, which is where it was written and where it BROKE. That file drew the bar with `bottom: 2px`, and this file's tap-target extension — a `::after` on the same element — set `top: -9px`. With top, height and bottom all non-auto, CSS drops `bottom`, so the bar rendered 9px ABOVE the button: a stray lavender line floating over the divider instead of an underline. Both rules were doing exactly what they said; they just could not both have the element. So the tap target gives it up (see below) and the underline is expressed against the rhythm rather than as a magic number: it clears the text band by --shelf-underline-gap and leaves the same clearance again beneath itself, so changing the gap, the band or the tail moves it correctly with no second edit. Colour is NOT here — light mode restates it in 16-light-mode-contrast.css. */ #mylist-view #mylist-header .section-btn.active::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--shelf-row-gap) + var(--shelf-cat-tail) - var(--shelf-underline-gap) - var(--shelf-underline-h)); width: 48%; height: var(--shelf-underline-h); border-radius: var(--shelf-underline-h); background: #a78bfa; pointer-events: none; } /* TAP TARGETS. A 22px row is the right SIZE but the wrong TARGET, so each row's hit area is extended past its box with a transparent pseudo-element. The extension is deliberately one-sided — the category row grows upward, the status row downward — because the two rows are only 6px plus a hairline apart: extending both toward each other would overlap their hit areas across the middle line, and a tap meant for Watching would land on ANIME. Growing away from the line keeps every tap unambiguous while roughly halving the miss rate. The category row uses ::before because ::after is the underline above. They cannot share: `top` and `bottom` on one absolutely positioned box are one geometry, and the two want opposite ends of the button. */ #mylist-view #mylist-header .section-btn::before, #mylist-view #mylist-toolbar .tab-btn::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; } #mylist-view #mylist-header .section-btn::before { top: -9px; bottom: 0; } #mylist-view #mylist-toolbar .tab-btn::after { top: 0; bottom: -9px; } /* ------------------------------------------------------ 2. STATUS ROW SHELL */ #mylist-view #mylist-toolbar.toolbar { /* THE TWO KNOBS FOR THE STATUS ROW'S WIDTH BUDGET. Everything downstream derives from these, including the alignment maths, so a narrow phone only has to restate the knob — never re-derive the offsets. --shelf-tab-pad : side padding on each status pill --shelf-tab-font : label size, unitless (multiplied by --shelfd-px below) */ --shelf-tab-pad: 11px; --shelf-tab-font: 13; display: block; width: 100%; gap: 7px; /* --shelf-midline-row is the middle line's OWN row. The line is drawn at top:-1px of this element, i.e. into this margin, so it belongs to NEITHER section's gap — without it the line borrows its pixel from the category row above, which then clears it by 2px while this row clears it by 3. It is a variable because 98-shelf-sticky-header.css has to add the same pixel to this row's sticky offset: when pinned, the toolbar is positioned rather than flowed, so the margin stops applying and the line would eat back into the category row's gap exactly as it did before. */ --shelf-midline-row: 1px; --shelf-chip-overhang: calc((var(--shelf-chip) - (var(--shelf-row-band) + 2 * var(--shelf-row-gap))) / 2); margin: var(--shelf-midline-row) 0 8px; /* TOP PADDING = the chips' overhang plus clearance. The search + sort chips keep their original 36px in a 28px row, so they hang 4px past it at the top. With no padding here that overhang reached back over the hairline and the chips sat on top of the line. This pushes the status row (and with it the chips) down far enough that the line clears them by 4px. Derived from the chip size, not typed: --shelf-chip-overhang is exactly how far a chip sticks out of the row, so resizing the chip re-solves this on its own. The category text still sits --shelf-row-gap above the line; only the space BELOW the line grows, which is the side the chips are on. The 10px bottom is the breathing room under the pinned row, and it has to be PADDING: the full-bleed fill in 98-shelf-sticky-header.css is drawn top:0/bottom:0 of this element's padding box, so margin would push the cards down and leave the fill behind — the same bleed one step lower. It sits BELOW the status band, where there is no line, so it does not affect the 3px rhythm. */ padding: calc(var(--shelf-chip-overhang) + 4px) 0 10px; } /* ------------------------------------------------------------ 3. THE TABS */ #mylist-view #mylist-toolbar .tabs { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; /* Left-aligned so the row starts where GAMES starts one row above. */ justify-content: flex-start; width: 100%; /* Small on purpose: .tab-btn carries 11px of its own side padding, so the labels sit ~24px apart text-to-text. */ gap: 2px; margin: 0; /* LEFT: the complement of the pill's own padding, so the first label always lands 20px from the screen edge and lines up with GAMES in the row above — 9px container gutter + this + the pill's padding = 9 + 11 = 20, at every width, whatever --shelf-tab-pad is set to. Derived, never restated. RIGHT: reserves the lane the search + sort chips are absolutely positioned into — two chips, the gap between them, and the same gap again as clearance from the last tab. Derived from the chip size for the same reason: it used to be a hardcoded 84px that matched a hardcoded 34px chip, and the two had to be remembered together. The chips are pinned to the right edge rather than laid out as flex items so they land in the identical spot on every category, which each show a different tab count. */ padding: 0 calc(2 * var(--shelf-chip) + 2 * var(--shelf-chip-gap)) 0 calc(11px - var(--shelf-tab-pad)); } /* ------------------------------------------------------- 4. THE STATUS PILL */ #mylist-view #mylist-toolbar .tab-btn, #mylist-view #mylist-toolbar .tab-btn.active { /* HOW THE FOUR LABELS SHARE THE ROW. `width: auto` makes each tab's flex-basis its own CONTENT width, and `flex: 1 1 auto` lets them grow into the leftover space in proportion to that basis. So the row still fills edge to edge, but a longer label — and in particular the ACTIVE tab, the only one showing its count badge — gets the extra pixels instead of every tab being handed an identical quarter. Measured at 390px with a realistic 2-3 digit count on each tab: equal quarters gave the active tab 71.7px against the 97px it needs; content basis gives it back the room. `min-width: 0` is what still permits shrink when the labels genuinely cannot all fit. */ width: auto; min-width: 0; flex: 1 1 auto; /* THE ROW'S HEIGHT. This one number, nothing else. v16.136: 32 -> 40. The category row above stays 32px; the two are deliberately unequal now. Once both rows pin together as one header, this is the control a user actually operates while scrolling a long list, and 32px read as a caption rather than a row of touch targets. */ /* THE SECTION HEIGHT, and the tap target. band + 2 x gap. Both rows use this same expression, which is what makes them identical by construction rather than by two numbers that have to be kept in step. */ height: calc(var(--shelf-row-band) + 2 * var(--shelf-row-gap)); min-height: 0; /* No border. It was 1px and fully transparent, but with border-box it still ate 1px off the top and bottom of the band — so the status text band measured 14px against the category row's 16px and the two rows could never be identical. */ border: 0; /* 11px left/right is DELIBERATELY unscaled — it is an alignment constant, not a size. The GAMES label above sits at a fixed 20px from the screen edge (16px button offset + 4px padding) and this row starts at the container's fixed 9px gutter, so 9 + 11 = 20 and the two rows share one left edge. A scaled value drifts with the viewport and measures 0.7–1.4px off. */ padding: var(--shelf-row-gap) var(--shelf-tab-pad); /* THE LABEL SIZE. Raising this is NOT free — the tabs share their row with the search and sort chips, and at 375px the last tab clears the search chip by 8.0px. 13 -> 14px widens the four labels by ~21px total and puts the row 13px INTO the chips on every 375px phone. Measured, not estimated. */ font-size: calc(var(--shelf-tab-font) * var(--shelfd-px, 1px)); line-height: var(--shelf-row-band); justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; } /* --------------------------------------------- 4b. THE ACTIVE STATUS PILL The category row keeps its underline. The status row is a filled pill instead, which is the clearer signal of the two on a row the user changes constantly. ITS HEIGHT IS SET IN JS, NOT HERE. shelfdSlidingPillGeom (js/06) sizes it to the text band plus PILL_BLEED (v16.145: 5px, half above and half below — 21px overall), so it keeps (--shelf-row-gap - PILL_BLEED/2) of clearance from the hairline on each side. Widening the row rhythm widens that clearance with it — the pill cannot grow into the lines. Change the pill's height there, not with a height here. NOTHING NEW WAS ADDED TO DRAW IT. `.tab-sliding-pill` already existed as the animated indicator element — already a rounded, absolutely positioned, spring- transitioned box that the swipe gesture drives frame by frame. It was simply being SIZED as a 3px line by shelfdSlidingPillGeom (js/06). Sizing it to the text band instead turns the same element into the pill and keeps the existing motion for free; the active button is already transparent with white text (14-live-update-discover-controls.css), so the pill reads through it. v16.142: softened from solid #7c3aed to a translucent lavender. Solid was the right call for an underline and too loud for a filled pill sitting behind text on every row — it read as a button rather than a selection. This keeps the same hue so it still belongs to the app's accent, at roughly a third of the weight. White label text stays legible because the ground underneath is near-black either way. */ #mylist-view #mylist-toolbar .tabs .tab-sliding-pill { background: rgba(139, 92, 246, 0.32); box-shadow: none; } /* ------------------------------------------- 4c. THE SEARCH + SORT CHIPS Only the POSITION and size live here — fill, press state and the icon stay in 35-shelf-banner.css. These are 36px in a 28px row on purpose: they keep their original size, so they overhang the row by 4px at the top and bottom and the hairline above the status row crosses them. That is handled by making the chips OPAQUE (see the note on their background in 35-shelf-banner.css) so the line passes behind them instead of showing through. Shrinking them to fit the row was tried and rejected — the chips are the wrong thing to compromise for a hairline. */ #mylist-view #mylist-toolbar .tabs #shelf-profile-sort-btn, #mylist-view #mylist-toolbar .tabs #mylist-search-toggle-btn { width: var(--shelf-chip); min-width: var(--shelf-chip); height: var(--shelf-chip); min-height: var(--shelf-chip); } #mylist-view #mylist-toolbar .tabs #shelf-profile-sort-btn { right: 0; } #mylist-view #mylist-toolbar .tabs #mylist-search-toggle-btn { right: calc(var(--shelf-chip) + var(--shelf-chip-gap)); } /* ------------------------------------------------------- 5. THE COUNT BADGE */ #mylist-view #mylist-toolbar .tab-count { min-width: 14px; height: 14px; margin-left: 3px; padding: 0 3px; font-size: calc(9 * var(--shelfd-px, 1px)); line-height: 1; } /* ------------------------------------------- 6. NARROW PHONES (<= 427px) THE PROBLEM THIS SOLVES The status row has to hold four labels, the active tab's count badge, and the 84px lane the search + sort chips are pinned into. At the design width (430) that all fits with room to spare. It does not fit on a 375, 390, 393 or 402pt phone: measured, the four labels alone need 288px against 273px of usable row at 375, and a three-digit count on the active tab pushes the requirement to ~313px. The labels were being hard-clipped mid-glyph by `overflow: hidden`. WHY NOT SCROLL THE ROW A horizontally scrollable tab row is the usual answer and it was the first thing tried. It is wrong HERE: js/40-mylist-status-swipe.js binds touchmove on `document` with `passive: false` and treats a horizontal drag anywhere on the shelf as "change status". A scrollable strip inside that would be fighting the app's own primary gesture for the same motion, which is why the card status tray already has to disable the swipe explicitly to work. WHERE THE BREAKPOINTS COME FROM Both were found by measuring, not by picking round numbers. Usable row = viewport - 18 (container gutters) - 84 (chip lane). Sweeping the real device widths with a three-digit count on each tab in turn: 440, 430, 428 fit at 13px / 11px -> untouched 420 short by ~1px -> first tier 402, 393, 390, 375 short by up to 14px -> first tier 360 (Android) short again even at 6px/12 -> second tier So the first tier starts at 427 (428 is the narrowest width that fits at full size) and the second at 374 (375 is the narrowest that fits at 6px/12). BOTH VALUES ARE NEEDED in the first tier; padding alone does not get there. Measured at 375 with a three-digit count on the active tab: 13px / 11px -> every tab clipped, worst by 14px 13px / 6px -> still clipped, worst by 3px 12px / 6px -> fits, alignment intact The 1px of label size is worth ~15px across the row, and that is what closes the last of the gap. ------------------------------------------------------------------------- */ @media (max-width: 427px) { #mylist-view #mylist-toolbar.toolbar { --shelf-tab-pad: 6px; --shelf-tab-font: 12; } } /* 360pt Android (Galaxy A-series and most 6.5" 720p panels) is 15px narrower again and still overflowed at 6px/12. Only the padding needs to give — the label size is already at its floor. */ @media (max-width: 374px) { #mylist-view #mylist-toolbar.toolbar { --shelf-tab-pad: 4px; } } /* ------------------------------------------------------------- 7. DESKTOP */ /* The only two values that differ above 700px. Everything else is shared, which is why there is no second copy of the blocks above. */ @media (min-width: 701px) { #mylist-view #mylist-header.mylist-section-card { padding: 4px 8px 8px; } #mylist-view #mylist-toolbar.toolbar { display: flex; } }