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-editor.css
+7 -2
View File
@@ -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; }
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); }