Browser: direct preview controls fit a narrow pane

piweb/hf-design.patch

@@ -7885,10 +7885,10 @@ index 0bf21eb..d2f4031 100644
    font-family: var(--font-mono);
 diff --git a/app/shell.css b/app/shell.css
 new file mode 100644
-index 0000000..dddbcc6
+index 0000000..106b05b
 --- /dev/null
 +++ b/app/shell.css
-@@ -0,0 +1,751 @@
+@@ -0,0 +1,754 @@
 +/* The app's frame, as Claude Code Desktop's: the conversation's header (the
 +   title and its menu; a button per pane on the right), the tiles (the chat
 +   and the panes it opened: Terminal, Changes, Browser, Files) and the Changes
@@ -8464,7 +8464,9 @@ index 0000000..dddbcc6
 +
 +/* ---------------------------------------------------------------- Browser */
 +.pane-browser { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
-+.browser-pane { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
++.browser-pane { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; container-type: inline-size; }
++/* A narrow pane keeps Direct preview as its icon (the tooltip names it). */
++@container (max-width: 460px) { .browser-preview-label, .browser-preview-note { display: none; } }
 +.browser-toolbar { gap: 2px; padding: 4px 6px; }
 +.browser-address { display: flex; flex: 1 1 auto; min-width: 80px; margin: 0 4px; }
 +.browser-address input {
@@ -8570,7 +8572,8 @@ index 0000000..dddbcc6
 +  font-size: 12px;
 +}
 +.browser-preview-bar > svg { flex: none; color: var(--text-dim); }
-+.browser-preview-title { flex: none; color: var(--text-strong); white-space: nowrap; }
++.browser-preview-title { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
++.browser-preview-bar > .ui-btn { flex: none; }
 +.browser-preview-note { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; }
 +.browser-preview-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
 +.browser-canvas.is-picking { cursor: crosshair; }
@@ -13069,10 +13072,10 @@ index 0f8186b..ef6cc22 100644
                <div style={{ padding: "4px 12px 8px 12px", maxHeight: 260, overflowY: "auto" }}>
 diff --git a/components/BrowserPane.tsx b/components/BrowserPane.tsx
 new file mode 100644
-index 0000000..9ce0ce6
+index 0000000..fd2ff63
 --- /dev/null
 +++ b/components/BrowserPane.tsx
-@@ -0,0 +1,757 @@
+@@ -0,0 +1,761 @@
 +"use client";
 +
 +// The Browser pane, as Claude Code Desktop's: the machine's own Chromium
@@ -13623,9 +13626,9 @@ index 0000000..9ce0ce6
 +        </form>
 +        {previewTarget && !preview && (
 +          <Tip label={t("browser.previewTip")}>
-+            <button type="button" className="ui-btn ui-btn--sm" onClick={() => void openPreview(previewTarget)}>
++            <button type="button" className="ui-btn ui-btn--sm" aria-label={t("browser.preview")} onClick={() => void openPreview(previewTarget)}>
 +              <CarbonIcon icon={Carbon.Flash} size={16} />
-+              <span>{t("browser.preview")}</span>
++              <span className="browser-preview-label">{t("browser.preview")}</span>
 +            </button>
 +          </Tip>
 +        )}
@@ -13723,7 +13726,7 @@ index 0000000..9ce0ce6
 +      {preview && (
 +        <div className="browser-preview-bar" role="status">
 +          <CarbonIcon icon={Carbon.Flash} size={14} />
-+          <span className="browser-preview-title">{t("browser.previewOf", { host: preview.host })}</span>
++          <span className="browser-preview-title" title={t("browser.previewNote")}>{t("browser.previewOf", { host: preview.host })}</span>
 +          <span className="browser-preview-note" title={t("browser.previewNote")}>{t("browser.previewNote")}</span>
 +          <Tip label={t("browser.previewReload")}>
 +            <button type="button" className="ui-btn ui-btn--sm ui-btn--icon" aria-label={t("browser.previewReload")} onClick={() => setPreview({ ...preview, key: Date.now() })}>
@@ -13735,7 +13738,11 @@ index 0000000..9ce0ce6
 +              <CarbonIcon icon={Carbon.Launch} size={16} />
 +            </a>
 +          </Tip>
-+          <button type="button" className="ui-btn ui-btn--sm" onClick={() => setPreview(null)}>{t("browser.previewBack")}</button>
++          <Tip label={t("browser.previewBack")}>
++            <button type="button" className="ui-btn ui-btn--sm ui-btn--icon" aria-label={t("browser.previewBack")} onClick={() => setPreview(null)}>
++              <CarbonIcon icon={Carbon.Close} size={16} />
++            </button>
++          </Tip>
 +        </div>
 +      )}
 +