:root{--maroon:#51000d;--cream:#fffeec;--dark:#1d2327;--r-lg:40px} *{box-sizing:border-box;margin:0;padding:0} body{background:#fff;font-family:"Montserrat","Segoe UI",system-ui,Arial,sans-serif;color:var(--dark)} .ttc-v2{width:1245px;margin:0 auto;max-width:100%} /* ===================== TYPE - Montserrat throughout ========================= H1 32 bold | Filter 14 bold | Newest 13 bold | Organized by 10 regular Exactly ONE h1 per page, 32px at EVERY width - it never steps down. ===================== GEOMETRY ============================================== band 86 tall at every width; grows only if the title needs a second line filter 65.22% of the band, inset 2.57% from its left, 3px under it, square top corners, 30 bottom corners, soft shadow, 60 tall sort 17.43% of the band, 4.18% in from its right, 1px #d3d2cb, radius 14 AT 786 AND BELOW: sort drops UNDER the filter; filter shrinks 60 -> 40 and keeps an equal inset both sides; sort centred; headings centre. The heading and its recipe count sit on one line when they fit; when they do not, the count takes a line of its own and never splits. OPEN PANEL: pulled out from under the band - square top corners, 3px below it, same width and inset as the filter bar, starts with "Recipe Types", no Filter label above while open, OVERLAYS the content instead of pushing it. Column headings a step larger than the rows. EVERY row shows a count including "All". At 786 and below the two columns stack with a 30px gap. The flag circles are PLACEHOLDERS - use the site's own flag assets. ============================================================================ */ .lh-band{background:var(--maroon);border-radius:var(--r-lg);min-height:86px; display:flex;align-items:center;padding:18px 49px;position:relative;z-index:2} .lh-band h1{color:#fff;font-size:32px;font-weight:700;line-height:1.11} .lh-tools{display:flex;align-items:flex-end;margin-top:3px} .lh-filter{margin-left:2.57%;flex:0 0 65.22%;height:60px;background:var(--cream); border-radius:0 0 30px 30px;box-shadow:0 3px 7px rgba(0,0,0,.07); display:flex;align-items:center;justify-content:center;padding:0 0 3px 22px; font-size:14px;font-weight:700;color:#6f6e64;cursor:pointer;user-select:none} .lh-filter .chev{margin-left:16px;transition:transform .18s} /* ROUND 17, JOB 17.9. THE PILL WAS SQUASHED AND THE CHEVRON SAT ON THE TEXT. * * Measured on the deployed release at 1440px: the pill was a fixed 51px tall * with `padding: 0 28px 0 23px` -- NO vertical padding at all -- and the * chevron was `position:absolute; right:28px; top:50%`, which centres it * vertically over a stack of TWO lines. So it landed on "Best match": the * chevron ran 951..966 and the text 886..966, an overlap of 15px, and the gap * between them measured -15. * * It is a GRID now, two rows by two columns, so the chevron sits in its own * column BESIDE both lines instead of floating over them, and the pill grows * to fit its content rather than being held at 51px. The look is unchanged -- * same cream, same 1px border, same 14px radius -- only the arrangement and * the spacing. */ .lh-sort{margin-left:auto;margin-right:4.18%;flex:0 0 17.43%; min-height:51px;background:var(--cream); border:1px solid #d3d2cb;border-radius:14px; display:grid;grid-template-columns:1fr auto; grid-template-areas:"label chev" "value chev"; align-items:center;column-gap:12px; padding:9px 23px;position:relative;cursor:pointer} /* ROUND 19, JOB 19.3: `nowrap`, because the pill grew to 69px at 1244 and 900 where "Organized by:" wrapped onto a second line -- a different SIZE from My Recipes' pill at those widths, which is what Tom saw. */ .lh-sort small{grid-area:label;font-size:10px;font-weight:400;color:#8a887c;line-height:1.25;white-space:nowrap} .lh-sort b{grid-area:value;font-size:13px;font-weight:700;color:#000;line-height:1.3;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lh-sort .chev{grid-area:chev;position:static;margin:0;align-self:center} .chev{width:15px;height:8px;flex:0 0 15px;display:block} .chev svg{width:15px;height:8px;display:block} .chev path{fill:none;stroke:#8a887c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ---------------- OPEN FILTER PANEL ---------------- */ .lh-wrap{position:relative} .lh-panel{display:none;position:absolute;top:0;left:2.57%;width:65.22%;z-index:20; background:var(--cream);border-radius:0 0 30px 30px; padding:26px 22px 20px;box-shadow:0 12px 26px rgba(0,0,0,.13)} .lh-panel.open{display:block} .lh-tools.open .lh-filter{visibility:hidden} .lh-cols{display:flex;gap:24px} .lh-col{flex:1 1 0;min-width:0} .lh-colhead{font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--maroon);padding:0 11px;margin-bottom:22px} .lh-row{display:flex;align-items:center;gap:12px;min-height:47px;padding:0 11px; border-radius:10px;cursor:pointer;user-select:none} .lh-row:hover,.lh-row.on{background:#f5efdf} .cb{width:21px;height:21px;border-radius:6px;background:var(--maroon);flex:0 0 21px; display:flex;align-items:center;justify-content:center} .cb svg{width:13px;height:13px;display:block} .cb path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .flag{width:21px;height:21px;border-radius:50%;flex:0 0 21px;background:#ddd; border:1px solid rgba(0,0,0,.12)} .lbl{flex:1 1 auto;font-size:14px;font-weight:500;color:var(--dark);min-width:0} .cnt{font-size:13px;font-weight:500;color:#a9a396;flex:0 0 auto;padding-left:10px} .lh-close{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:12px; font-size:14px;font-weight:700;color:#6f6e64;cursor:pointer;user-select:none} .lh-close .chev{transform:rotate(180deg)} /* ---------------- section heading + count ---------------- */ .lh-sec{margin-top:34px;font-size:22px;font-weight:700; display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px} .lh-sec a{color:var(--dark);text-decoration:underline;text-underline-offset:3px} .lh-sec span{color:#8b8f93;font-weight:400;white-space:nowrap} @media (max-width:786px){ .lh-tools{flex-direction:column;align-items:center;gap:10px;margin-top:3px} .lh-filter{margin:0 32px;width:calc(100% - 64px);flex:0 0 auto;height:40px} .lh-sort{margin:0 auto;width:50%;flex:0 0 auto;height:51px} .lh-panel{left:32px;width:calc(100% - 64px)} .lh-cols{flex-direction:column;gap:30px} .lh-sec{justify-content:center;text-align:center} } @media (max-width:1023px){ .ttc-v2{padding:0 16px} .lh-band{padding:18px 22px;border-radius:30px} .lh-sec{margin-top:24px;font-size:19px} } @media (max-width:600px){ .lh-band{padding:18px 18px} .lh-filter{margin:0 24px;width:calc(100% - 48px)} .lh-sort{width:62%} .lh-panel{left:24px;width:calc(100% - 48px);padding:20px 14px 16px} .lh-row{min-height:44px} } /* ROUND 12, C5b. THE SORT CONTROL OPENS. It was a div with words in it and nowhere to go. The menu is plain links, positioned under the control, and it opens on hover or focus so it needs no script -- `listhead.js` never mentioned `.lh-sort` and still does not. */ .lh-sort { position: relative; cursor: pointer; } .lh-sortmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: none; flex-direction: column; min-width: 160px; background: #fff; border: 1px solid #e7e7e7; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.13); overflow: hidden; } .lh-sort:hover .lh-sortmenu, .lh-sort:focus-within .lh-sortmenu { display: flex; } .lh-sortitem { padding: 10px 16px; text-decoration: none; color: inherit; white-space: nowrap; } .lh-sortitem:hover { background: #f5f5f5; } .lh-sortitem.on { font-weight: 700; } /* ROUND 13, JOB 1. THE SEARCH BOX, INSIDE THE BURGUNDY BAND. The only place to search on this page -- the white bar that used to float below the results over the filter panel is deleted from the template, not hidden. Label, the input already carrying the term, the green button. The green is the site's own #49b730. */ /* `.lh-band` is a flex ROW and it is shared with the category and recipe-list pages, which have no form in it. Rather than change how the band lays out for everybody -- or depend on `:has()` -- the search page's band wraps its own contents in one column. The other pages emit no wrapper and are not touched. */ /* ROUND 19, JOB 19.3. CENTRED, like My Recipes. * Measured as served: My Recipes' band has `align-items: center` with 25px of * slack above and below its content; the search band had `stretch` with 18/18 * and its contents pressed against the padding. `stretch` was put here so the * band's inner column would fill the height; centring is what the reference * does and what Tom asked for. */ .lh-band--search { align-items: center; } .lh-bandin { flex: 1 1 100%; min-width: 0; } .lh-band .lh-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; /* ROUND 18, JOB 18.1: the 14px that used to sit here was spacing under the separate "Search Results" heading, and round 14 removed that heading. It made the band 92px tall against My Recipes' 86 -- the band's own 86px min-height covers it now, so the two are the same height. */ margin-top: 0; width: 100%; box-sizing: border-box; } .lh-band .lh-search label { color: #fff; font-size: 15px; white-space: nowrap; } .lh-band .lh-search input[type="search"] { flex: 1 1 200px; min-width: 0; max-width: 100%; box-sizing: border-box; height: 42px; padding: 0 16px; border: 0; border-radius: 8px; background: #fff; color: #1d2327; font: inherit; font-size: 15px; } /* ROUND 19, JOB 19.3. THE BAND MUST NOT GROW. * `flex: 1 1 100%` here pushed the field onto its own line below 786px, and the * band went from 86px to 113px -- taller than My Recipes at 600, 480 and 390, * which is the first thing Tom saw. Round 14 asked for the stacking; round 19 * asks for the band not to grow, and the two cannot both hold. The field keeps * its 42px height and shares the line, shrinking instead of wrapping: it has * `min-width: 0`, so it can. */ @media (max-width: 786px) { .lh-band .lh-search { gap: 8px; } .lh-band .lh-search input[type="search"] { flex: 1 1 120px; } } /* ROUND 14, JOB 5. The search page's own row: the three type buttons where the Filter dropdown used to be, and "Organized by" still on the right. There is no filter panel on this page -- a search spans recipes, pages and posts alike, so there is nothing to filter it by that the tabs do not already do. */ /* ROUND 18, JOB 18.1. THE SEARCH ROW IS THE MY RECIPES ROW. * * This is a copy job, so the numbers are My Recipes' own, read off the page it * already renders and not chosen here: * * .lh-filter margin-left 2.57% flex 0 0 65.22% height 60px * .lh-sort margin-left auto flex 0 0 17.43% margin-right 4.18% * .lh-tools align-items flex-end * * Measured before this change, at 1440px: the row was 52px tall against My * Recipes' 60, the first type button sat at 79 where the Filter bar sits at * 103, and "Organized by" was 155px wide at x=840 against 167px at x=829 -- * because `flex: 0 0 auto` let it size to its text instead of taking the * 17.43% the reference gives it. * * So the tab group stands exactly where the Filter bar stands and is the same * height, and the sort keeps the reference's own geometry. `align-items` goes * back to the inherited flex-end, which is what puts the sort's bottom edge on * the row's bottom edge on My Recipes. */ .lh-tools--tabs { gap: 12px; flex-wrap: wrap; } .lh-tools--tabs #subpages-menu { /* the Filter bar's own offset and height, so the Recipes button's left edge lands on the Filter bar's left edge to the pixel. The margin is written in full, not just `margin-left`: this is a
and the theme gives it 18.4px of margin-bottom, which made the row 78px tall against My Recipes' 60 even once the section itself was 60. */ margin: 0 0 0 2.57%; flex: 0 0 65.22%; min-width: 0; min-height: 60px; display: flex; align-items: center; } .lh-tools--tabs #subpages-menu .in { padding: 0; width: 100%; } .lh-tools--tabs #subpages-menu nav { display: flex; gap: 10px; flex-wrap: wrap; } /* ROUND 19, JOB 19.3. THE ROW READS AS ONE ROW. * The pill is 52px and the three buttons were 34px, so the row was a tall box * beside short ones -- where on My Recipes the pill stands beside a 60px Filter * bar. The pill is NOT shrunk: Tom's other instruction is that the control must * be the same as My Recipes', and it is (52px, 167px, same position, same type). * The buttons rise to meet it instead. */ /* ONLY WHERE THEY ACTUALLY SIT BESIDE IT. Below 786px My Recipes turns the row into a centred column, so the pill is under the buttons rather than next to them and there is no row to read as one row. Giving them 52px there stacked three 52px buttons into a 176px block against My Recipes' 40px bar, so the rule is scoped to the widths where they are side by side. */ @media (min-width: 787px) { .lh-tools--tabs #subpages-menu nav .simple-btn { min-height: 52px; display: inline-flex; align-items: center; } } /* the reference's own sizing, not content-sized */ .lh-tools--tabs .lh-sort { margin-left: auto; } /* ROUND 18, JOB 18.1, THE NARROW WIDTHS. My Recipes stacks its row into a * centred column below 786px and insets the Filter bar by a fixed margin * rather than a percentage, so the tab group has to follow the same numbers or * the Recipes button drifts off the Filter bar's edge. Measured before this: * at 768px the Filter bar sits at 52 and the Recipes button sat at 147; at * 390px the Filter bar sits at 44 and the button sat at 29. * * .lh-filter <=786 margin 0 32px width calc(100% - 64px) height 40px * .lh-filter <=600 margin 0 24px width calc(100% - 48px) * .lh-sort <=786 margin 0 auto width 50% * .lh-tools <=786 column, centred, gap 10px * * `.lh-tools--tabs` is two classes and beats `.lh-tools`, so its gap has to be * restated here or it would keep 12px where the reference uses 10px. */ @media (max-width: 786px) { .lh-tools--tabs { gap: 10px; } .lh-tools--tabs #subpages-menu { margin: 0 32px; width: calc(100% - 64px); flex: 0 0 auto; min-height: 40px; } /* LEFT, not centred. The Filter bar's left EDGE is the reference, and centring the buttons inside the group put the Recipes button at 137 against the Filter bar's 52. */ .lh-tools--tabs #subpages-menu nav { justify-content: flex-start; } .lh-tools--tabs .lh-sort { margin: 0 auto; } } @media (max-width: 600px) { .lh-tools--tabs #subpages-menu { margin: 0 24px; width: calc(100% - 48px); } } /* the label and the term on one line; they stack only on a phone */ .lh-band .lh-search { flex-wrap: nowrap; } .lh-band .lh-search h1 { flex: 0 0 auto; margin: 0; font-size: 32px; font-weight: 700; line-height: 1.11; color: #fff; } .lh-band .lh-search h1 label { color: inherit; font: inherit; cursor: text; } .lh-band .lh-search label { flex: 0 0 auto; } /* ROUND 19, JOB 19.3. THE STACKING IS GONE, AND THAT IS A REVERSAL. * * Round 14's job 5c asked for the label and the field to stack at phone width. * Round 19 asks for the band not to grow -- measured, stacking made it 113px * against My Recipes' 86px at 600, 480 and 390, and that is the first thing Tom * listed. The two requirements cannot both hold, so the later one wins and this * is recorded rather than quietly dropped. `tools/search_gate.py` asserted the * stacking and now asserts the opposite, for the same reason. * * The smaller heading size stays: it is what lets the two sit on one line in * 314px of band. */ @media (max-width: 600px) { .lh-band .lh-search h1 { font-size: 24px; } } /* ROUND 17, JOB 17.8. THE SENTENCE LINES UP WITH THE BAND'S TEXT. * * Measured on the deployed release at eight widths: the sentence was already * flush with the burgundy band's OUTER edge at every one of them -- 79 against * 79 at 1440, 20 against 20 at 390. What it never lined up with was the band's * own text, because `.lh-band` carries 49px of side padding (22px under * 1024, 18px under 600) and "Search Results For:" sits inside that. So the * sentence hung 49px to the left of the most prominent thing above it. * * It now takes the SAME side padding as the band, so it tracks the band's text * at every width instead of being told a number. And 30px above it was * measured as crammed under the buttons; 28px of that was the paragraph's own * 18px margin plus the row gap, so it is raised to a clear 32px. */ .lh-nothing { margin: 32px 0 0; padding: 0 49px; font-size: 16px; color: #4e5155; } @media (max-width: 1023px) { .lh-nothing { padding: 0 22px; } } @media (max-width: 600px) { .lh-nothing { padding: 0 18px; } } /* ================================================================== * ROUND 25, JOB 25.3. THE SEARCH PAGE'S BUTTON ROW, MEASURED AGAINST * ITSELF. * * Every rule here is scoped to `.lh-tools--tabs`, which only the SEARCH * page carries -- My Recipes' row is a plain `.lh-tools` with a Filter * bar. So nothing below changes any other page, and the Filter bar's * deliberate tuck under the band is untouched. * * WHAT WAS MEASURED BEFORE ANY OF THIS, on /search/?s=chicken alone: * * label centring inner space left 6.1px, right 51.1px at 1440 -- * 45px out. And 0.0px at 786 and below, where the * button is still the theme's inline-block. * shared edges button top 481.7 / bottom 533.7 against the * control's 485.3 / 537.7 -- 3.6 and 4.0 out. * left edge first button 103.3 against the heading's 127.7 * -- 24.4 out, and -21.8 at 1600, -27.0 at 1244. * gap 3px at every width. The locked rule is 30. * pure #000 the value text and its border colour. * width the control GREW as the viewport narrowed: * 166.7px at 1440, 149.9 at 900, 217 at 390. * ================================================================== */ /* (d) THE GAP WAS 30px AND IS 3px -- ROUND 76, PHASE 1 CHANGED IT. Round 25 read Tom's locked rule as 30 for the search row, because the row is three free-standing buttons rather than the Filter bar that is drawn tucked under the band. Round 76's brief calls the result a DEFECT and not polish: the row reads DETACHED from the maroon band on all three pages that draw it. `design/recipe-list-header-v8.html` -- the handover file app/listhead.py is built from -- specifies "filter ... 3px under it" and `.lh-tools{margin-top:3px}`, and static/site/listhead-page.css already records that "the file puts the filter 3px under the band on purpose, and that 3 is inside the component, not the gap below it". So the search row now takes the same 3 as the other two, and the 30 that used to be here is the 30 UNDER the whole component, which `.lh-wrap{margin-bottom:30px}` in listhead-page.css still holds. ROUND 76b: AND THE SAME 0 AS THE OTHER TWO, NOT THE SAME 3. Tom's brief on the round-76 candidate asks for the band and the row below it to TOUCH -- "Band -> Filter vertical gap = 0 (they touch, one unified component)". The search page has no Filter bar, but it is the same component drawn by the same function, and leaving it 3px off while the other two sit at 0 would be a new drift of exactly the kind this round exists to undo. The full reasoning, and the three numbers this has been, are in static/site/listhead-row-v2.css beside the matching rule. The 30 under the whole component is still `.lh-wrap{margin-bottom:30px}` and is untouched. DEVIATION FROM 04-search-row-FINAL.jpg, recorded in QUESTIONS.md: that drawing's note says "the gap under the maroon box is 30px on both pages". Round 76 already moved off it on Tom's instruction; this moves the rest. */ .lh-tools--tabs { margin-top: 0; } /* (b) THE BUTTONS AND THE CONTROL SHARE A TOP AND A BOTTOM EDGE. `.lh-tools` is `align-items: flex-end`, which puts the control's bottom on the row's bottom while the button group centres its 52px buttons inside a 60px box -- 4px of difference that nothing else explains. Both are centred on the same axis now, and the group is the height of the buttons it holds rather than the Filter bar's 60. */ .lh-tools--tabs { align-items: center; } .lh-tools--tabs #subpages-menu { min-height: 52px; } /* (c) THE ROW'S CONTENT BOX IS THE BAND'S CONTENT BOX. The row spanned the band's OUTER width while the heading sits inside the band's 49px padding, so the first button stood 24px to the left of the word above it. The row takes the band's own padding instead, at each of the band's three breakpoints, and the two offsets that used to position the group and the control inside it -- 2.57% and 4.18%, which are My Recipes' Filter-bar geometry -- are no longer needed and are removed. */ .lh-tools--tabs { padding-left: 49px; padding-right: 49px; box-sizing: border-box; } .lh-tools--tabs #subpages-menu { margin: 0; flex: 1 1 auto; } .lh-tools--tabs .lh-sort { margin-left: auto; margin-right: 0; } /* (a) THE LABEL IS CENTRED. The cause is the rule above this one in the file: at 787px and up the button becomes `inline-flex` so its label can be centred VERTICALLY, and `text-align: center` does not position anything in a flex container -- the text becomes an anonymous flex item and `justify-content` decides, which was `normal`, which is flex-start. Below 787 the button is still the theme's `inline-block` and the label was already centred, measured 0.0px out, so this is deliberately inside the same query and not global. */ @media (min-width: 787px) { .lh-tools--tabs #subpages-menu nav .simple-btn { justify-content: center; } } /* (e) NO PURE BLACK. The value read #000 where every other word on the page reads `--dark`. */ .lh-tools--tabs .lh-sort b { color: var(--dark); } /* (f) AND (i) THE CONTROL SIZES TO ITS OWN WORDS. It was `flex: 0 0 17.43%` -- a share of the row -- which did two wrong things at once. It TRUNCATED "Best match" at 1440, 1350, 1349, 1244, 900 and 787, because 17.43% of those rows is narrower than the words; and it GREW as the viewport narrowed, measured 149.6px at 1440 against 167.7px at 1100 and 217px at 390, because the percentage is of a row whose padding changes at each breakpoint. Both lines inside it are already `nowrap`, so sizing to content can only ever be exactly wide enough: it cannot clip, and it cannot grow when the screen shrinks. */ .lh-tools--tabs .lh-sort { flex: 0 0 auto; width: auto; } /* (g) THE DROPDOWN OPENS BY TAP. It opened on `:hover` and `:focus-within` only, and a touch screen has neither -- a tap on a div that is not focusable does nothing. The control is a button to the browser now: it takes focus, so `:focus-within` fires on tap, and `listhead.js` closes it again on the next tap outside. */ .lh-tools--tabs .lh-sort[tabindex] { outline: none; } .lh-tools--tabs .lh-sort[tabindex]:focus-visible { box-shadow: 0 0 0 3px rgba(253,125,35,.35); } .lh-tools--tabs .lh-sort.is-open .lh-sortmenu { display: flex; } @media (max-width: 1023px) { /* the band's own padding at this breakpoint */ .lh-tools--tabs { padding-left: 22px; padding-right: 22px; } } @media (max-width: 786px) { /* (c) below 786 the group carries the Filter bar's own 32px/24px inset on top of the row's padding, which put the first button 32px inside the heading. The row's padding is the whole inset now, here as above. */ .lh-tools--tabs #subpages-menu { margin: 0; width: 100%; } /* (i) THE CONTROL NEVER GROWS AS THE VIEWPORT NARROWS. `width: 50%` and then `62%` below 600 made it 217px at 390 against 149.9px at 900 -- it got BIGGER as the screen got smaller. It sizes to its own content instead, which is `nowrap` on both lines, so it can only shrink. */ .lh-tools--tabs .lh-sort { width: auto; max-width: 100%; } /* the row stays a row's width; the stack is the parent's business */ .lh-tools--tabs { padding-left: 22px; padding-right: 22px; } } @media (max-width: 600px) { .lh-tools--tabs { padding-left: 18px; padding-right: 18px; } .lh-tools--tabs .lh-sort { width: auto; } .lh-tools--tabs #subpages-menu { margin: 0; width: 100%; } } /* ===================================================================== ROUND 76, PHASE 3: ON A PHONE THE TERM GETS ITS OWN LINE. ROUND 76c, PHASE 2: AND IT IS THE WIDTH THAT DECIDES, NOT A BREAKPOINT. MEASURED AT 390 BEFORE ROUND 76: the field is 66px wide inside a 314px band -- wide enough for "chi" of "chicken" -- because it shares the line with a heading that reads "Search Results For:" and is 240px of it. A reader cannot see what they searched for, which is the one thing this page exists to tell them. ROUND 76 fixed that with a breakpoint: below 600px the heading and the field each took a line of their own, and the band grew to 114.6px. Tom's brief on that candidate asks for the RULE behind it instead of the number: the field keeps a minimum width equal to its phone width; where it fits BESIDE "Search Results For:" at that width it sits on the same line and the band stays short; where it would have to shrink below it, it drops under the title and the band is taller. THE PHONE WIDTH IS 314px, and it is measured, not chosen: it is what the field is given at the 390px reference phone -- a 350px band inside a 390px window, less the band's own 18px of padding on each side. `min(314px, 100%)` is what keeps it honest on a NARROWER phone: at 360 the whole band is 284px wide, and a hard 314 would push the field through the side of it. At that width the minimum is the line, which is the same thing said in a way that cannot overflow. THE BREAKPOINT IS GONE AND NOTHING REPLACES IT. `flex-wrap: wrap` with that minimum as the field's flex-basis IS the rule: flexbox wraps an item onto the next line exactly when its own minimum will not fit beside its neighbour, so the switch happens wherever the arithmetic says it happens and follows the heading's font-size and the band's padding when either changes. Measured after: inline down to 733px, under the title from 732px down, and the phone is unchanged at 314px in a 114.6px band -- the same number round 76 shipped and round 76b confirmed with a whole search term in it. AND THIS IS STILL THE REVERSAL OF A REVERSAL -- THE WHOLE CHAIN, BECAUSE EVERY LINK IN IT IS TOM'S AND THE NEXT ROUND MUST NOT UNDO ONE BY READING ONLY THE LAST. round 14, job 5c the label and the field stack at phone width. round 19, job 19.3 the stacking is GONE: it made the band 113px against My Recipes' 86 at 600, 480 and 390, and that was the first thing Tom listed. The comment saying so is still in this file, above, and it is still true about the band's height -- what changed is what it is weighed against. round 76, phase 3 the stacking is back below 600: at 390 the field had 66px of a 314px band and showed "chi" of "chicken", and a search page that cannot show the term has failed at the one thing it does. round 76c the band grows only where it MUST. Round 19's objection was a band that grew on a phone for no gain; this grows it only at the widths where the alternative is a field too narrow to read, and leaves it at 86px everywhere else -- which is more of round 19's 86px than round 76 kept, not less. AND IT CLOSES ROUND 76b's OPEN NOTE. QUESTIONS.md, ROUND 76b (e): at 601px a long term was clipped, because round 76 scoped the stacking to `max-width: 600px` and a 601px window kept a 188px field. That window is now a window where the field does not fit beside the heading, so the field takes its own line and gets the whole band -- no second number, and no 601-to-786 hole left in the rule. ===================================================================== */ .lh-band .lh-search { flex-wrap: wrap; row-gap: 10px; } .lh-band .lh-search input[type="search"] { /* the phone's own width as a floor, and the line itself where the line is narrower than the phone this was measured on */ flex: 1 1 314px; min-width: min(314px, 100%); }