From 2e2fec4a9cdff33e20328ed5c447191f5e7dfc2f Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Wed, 18 Feb 2026 13:00:51 -0600
Subject: [PATCH] bucket add layout fix

---
 src/views/SettingsView.tsx | 48 +++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/views/SettingsView.tsx b/src/views/SettingsView.tsx
index fb88993..5a82077 100644
--- a/src/views/SettingsView.tsx
+++ b/src/views/SettingsView.tsx
@@ -389,7 +389,7 @@ export const SettingsView: Component = () => {
                             <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
                                 <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
                                 <form
-                                    class="flex gap-2"
+                                    class="flex flex-col sm:flex-row gap-2"
                                     onSubmit={(e) => {
                                         e.preventDefault();
                                         const form = e.currentTarget;
@@ -405,27 +405,31 @@ export const SettingsView: Component = () => {
                                         }
                                     }}
                                 >
-                                    <input
-                                        name="color"
-                                        type="color"
-                                        class="w-9 h-9 rounded-lg border border-input p-0.5 bg-background cursor-pointer"
-                                        value="#6366f1"
-                                    />
-                                    <input
-                                        name="name"
-                                        class="flex h-9 w-full sm:w-48 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                                        placeholder="Bucket Name"
-                                        required
-                                    />
-                                    <input
-                                        name="desc"
-                                        class="flex flex-1 h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                                        placeholder="Description (optional)"
-                                    />
-                                    <Button size="sm" type="submit" class="h-9 gap-2">
-                                        <Plus size={14} />
-                                        Create
-                                    </Button>
+                                    <div class="flex gap-2 w-full sm:w-auto min-w-0">
+                                        <input
+                                            name="color"
+                                            type="color"
+                                            class="w-9 h-9 rounded-lg border border-input p-0.5 bg-background cursor-pointer shrink-0"
+                                            value="#6366f1"
+                                        />
+                                        <input
+                                            name="name"
+                                            class="flex h-9 flex-1 sm:w-48 sm:flex-none rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                                            placeholder="Bucket Name"
+                                            required
+                                        />
+                                    </div>
+                                    <div class="flex gap-2 w-full sm:flex-1 min-w-0">
+                                        <input
+                                            name="desc"
+                                            class="flex flex-1 h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                                            placeholder="Description (optional)"
+                                        />
+                                        <Button size="sm" type="submit" class="h-9 gap-2 shrink-0">
+                                            <Plus size={14} />
+                                            Create
+                                        </Button>
+                                    </div>
                                 </form>
                             </div>