From a2e0003df26cf028c0c33474ba970a52a629ff8f Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 1 Apr 2026 09:00:22 -0500
Subject: [PATCH] Wrap preview toolbar and widen URL input

- Allow the preview toolbar to wrap on smaller widths
- Move the URL field into its own flexible row so it can grow on large screens
---
 apps/web/src/components/PreviewPanel.tsx | 35 ++++++++++++------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/PreviewPanel.tsx b/apps/web/src/components/PreviewPanel.tsx
index 3d09fec52..0a6eab9fb 100644
--- a/apps/web/src/components/PreviewPanel.tsx
+++ b/apps/web/src/components/PreviewPanel.tsx
@@ -296,8 +296,8 @@ export function PreviewPanel({ threadId, onClose }: PreviewPanelProps) {
   return (
     <div className="flex h-full min-w-0 flex-col bg-background">
       {/* Toolbar */}
-      <div className="flex items-center gap-2 border-b border-border/60 px-3 py-2">
-        <div className="flex min-w-0 flex-1 items-center gap-2">
+      <div className="flex flex-wrap items-center gap-2 border-b border-border/60 px-3 py-2">
+        <div className="flex items-center gap-2">
           <Button
             type="button"
             size="icon-xs"
@@ -334,23 +334,22 @@ export function PreviewPanel({ threadId, onClose }: PreviewPanelProps) {
           >
             <RefreshCwIcon className="size-3.5" />
           </Button>
-          <GlobeIcon className="size-3.5 shrink-0 text-muted-foreground/65" />
-          <form className="min-w-0 flex-1" onSubmit={onSubmit}>
-            <Input
-              value={inputUrl}
-              onChange={(event) => {
-                setInputUrl(event.target.value);
-                if (inputError) setInputError(null);
-              }}
-              placeholder="https://example.com"
-              aria-label="URL"
-              autoCapitalize="off"
-              autoCorrect="off"
-              spellCheck={false}
-              className="h-7 text-xs"
-            />
-          </form>
         </div>
+        <form className="order-last min-w-0 basis-full lg:order-none lg:flex-1 lg:basis-auto" onSubmit={onSubmit}>
+          <Input
+            value={inputUrl}
+            onChange={(event) => {
+              setInputUrl(event.target.value);
+              if (inputError) setInputError(null);
+            }}
+            placeholder="https://example.com"
+            aria-label="URL"
+            autoCapitalize="off"
+            autoCorrect="off"
+            spellCheck={false}
+            className="h-7 text-xs"
+          />
+        </form>
         <div className="flex items-center gap-1">
           <Menu>
             <MenuTrigger