From d2574a3be747168e69da625aaaf61d4cd2e3a5b1 Mon Sep 17 00:00:00 2001 From: DongHyeonka Date: Tue, 18 Aug 2026 13:35:25 +0900 Subject: [PATCH] fix: stop the Asset search row from overflowing the 360px viewport Caught by the visual suite, not predicted: at 360px the Picker's new search row laid itself out at 366px inside a 328px column and pushed the submit button off-screen, taking the document's scrollWidth to 382. Both defaults involved resolve to a min-content minimum: an implicit grid track (`auto`) and a flex container (`min-width: auto`). Neither will shrink below the row's min-content, so the input's `flex: 1; min-width: 0` never got the chance to give the button room. `minmax(0, 1fr)` on the track and `min-width: 0` on the row are the same pair `.studio-editor-layout` already needs one file over. `.studio-asset-tools` gets the guard too -- the Library's search row has the identical structure and no visual golden watching it. Verified in Chromium at 360 and 1440 on both routes: scrollWidth equals the viewport and no element extends past it. Co-Authored-By: Claude Opus 5 (1M context) --- .../tech-log/presentation/styles/studio-editor.css | 9 +++++++-- src/features/tech-log/presentation/styles/studio.css | 6 +++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/features/tech-log/presentation/styles/studio-editor.css b/src/features/tech-log/presentation/styles/studio-editor.css index bbbe564..9178b6b 100644 --- a/src/features/tech-log/presentation/styles/studio-editor.css +++ b/src/features/tech-log/presentation/styles/studio-editor.css @@ -81,8 +81,13 @@ /* Declared after `.asset-picker button` on purpose: the pill rule above also matches this form's submit button, and both selectors carry the same specificity, so only source order tells them apart. */ -.studio-app .asset-picker-search { display: grid; max-width: 420px; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 650; } -.studio-app .asset-picker-search div { display: flex; gap: 8px; } +/* `minmax(0, 1fr)` and the row's `min-width: 0` are both load bearing, for the + reason `.studio-editor-layout` already needs the same pair: a grid track and + a flex container both default to an automatic minimum of their min-content + size, so at 360px the search row sized itself to 366px inside a 328px column + and pushed the submit button off-screen (document scrollWidth 382). */ +.studio-app .asset-picker-search { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 650; } +.studio-app .asset-picker-search div { display: flex; min-width: 0; gap: 8px; } .studio-app .asset-picker-search input { min-width: 0; flex: 1; min-height: 44px; padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font-size: 14px; } .studio-app .asset-picker-search button { min-height: 44px; padding-inline: 16px; border-radius: 5px; font-size: 13px; font-weight: 650; } .studio-app .asset-picker ul:not(:empty) { margin-top: 12px; } diff --git a/src/features/tech-log/presentation/styles/studio.css b/src/features/tech-log/presentation/styles/studio.css index e809ab4..f73997e 100644 --- a/src/features/tech-log/presentation/styles/studio.css +++ b/src/features/tech-log/presentation/styles/studio.css @@ -82,8 +82,12 @@ .studio-app .studio-document-tools label, .studio-app .studio-asset-tools form, .studio-app .studio-asset-tools label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 650; } +/* `min-width: 0` for the same reason `.asset-picker-search div` needs it: a + flex container's automatic minimum is its min-content size, which at 360px + forces the row wider than its column instead of shrinking the input. */ .studio-app .studio-document-tools form div, -.studio-app .studio-asset-tools form div { display: flex; gap: 8px; } +.studio-app .studio-asset-tools form div { display: flex; min-width: 0; gap: 8px; } +.studio-app .studio-asset-tools form { min-width: 0; } .studio-app .studio-document-tools input, .studio-app .studio-document-tools select, .studio-app .studio-asset-tools input { width: 100%; min-width: 0; min-height: 44px; padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); }