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) <noreply@anthropic.com>

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; }
+/* `minmax(0, 1fr)` and the row's `min-width: 0` are both load bearing, for the
-.studio-app .asset-picker-search div { display: flex; gap: 8px; }
+   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

@@ -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); }