donghyeon.kang/tech-log-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: stop the Asset search row from overflowing the 360px viewport

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
DongHyeonka
2026-08-18 13:35:25 +09:00
co-authored by Claude Opus 5
parent 9950cb9d6b
commit d2574a3be7
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/tech-log/presentation/styles/studio.css
+5 -1
View File
@@ -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); }