From d84830535501e81027ff8ceb0a68b398993a4bf3 Mon Sep 17 00:00:00 2001
From: Chris <thinker@homezero.cc>
Date: Sun, 1 Nov 2026 02:40:38 -0500
Subject: [PATCH] style: position extraction, social import, and scan photo
 buttons below url input field

---
 public/index.html |  4 +--
 public/style.css  | 84 ++++++++++++++++++++++++++++++++++-------------
 2 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/public/index.html b/public/index.html
index 1008823..d001c81 100644
--- a/public/index.html
+++ b/public/index.html
@@ -75,7 +75,7 @@
           <i data-lucide="link" class="input-icon"></i>
           <input type="url" id="scrape-url-input" placeholder="Paste recipe link, Instagram Reel, or TikTok video here..." autocomplete="off">
         </div>
-        <div class="hero-buttons-group" style="display: flex; gap: 8px;">
+        <div class="hero-buttons-group">
           <button type="submit" class="btn btn-primary" id="btn-scrape-submit">
             <i data-lucide="wand-2"></i> <span>Extract Recipe</span>
           </button>
@@ -83,7 +83,7 @@
             <i data-lucide="instagram"></i> <span>Social Import</span>
           </button>
           <input type="file" id="scan-image-input" accept="image/*" style="display: none;">
-          <button type="button" class="btn btn-accent" id="btn-scan-image" style="background-color: var(--secondary); color: var(--text-white);" title="Scan Recipe from Photo">
+          <button type="button" class="btn btn-accent" id="btn-scan-image" title="Scan Recipe from Photo">
             <i data-lucide="camera"></i> <span>Scan Photo</span>
           </button>
         </div>
diff --git a/public/style.css b/public/style.css
index d1b32b7..0618d56 100644
--- a/public/style.css
+++ b/public/style.css
@@ -339,44 +339,46 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .url-input-form {
-  max-width: 750px;
+  max-width: 720px;
   margin: 0 auto;
   display: flex;
-  gap: 12px;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.url-input-form .input-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
   background-color: var(--bg-card);
-  padding: 8px;
+  padding: 4px;
   border-radius: var(--border-radius-lg);
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-md);
   transition: all var(--transition-normal);
 }
 
-.url-input-form:focus-within {
+.url-input-form .input-wrapper:focus-within {
   border-color: var(--primary);
   box-shadow: 0 0 0 4px var(--primary-glow);
 }
 
-.input-wrapper {
-  position: relative;
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-}
-
 .input-icon {
   position: absolute;
-  left: 16px;
+  left: 18px;
   color: var(--text-muted);
   width: 20px;
   height: 20px;
+  pointer-events: none;
 }
 
 .url-input-form input {
   width: 100%;
-  padding: 14px 14px 14px 50px;
+  padding: 16px 16px 16px 52px;
   background: transparent;
   border: none;
-  font-size: 1rem;
+  font-size: 1.02rem;
   color: var(--text-main);
   outline: none;
 }
@@ -386,6 +388,32 @@ h1, h2, h3, h4, h5, h6 {
   opacity: 0.8;
 }
 
+.hero-buttons-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.hero-buttons-group .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 22px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-normal);
+}
+
+.hero-buttons-group .btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
 /* Recipes Dashboard Library */
 .library-section {
   border-top: 1px solid var(--border-color);
@@ -2047,24 +2075,36 @@ h1, h2, h3, h4, h5, h6 {
   
   .url-input-form {
     flex-direction: column;
-    padding: 6px;
-    border-radius: var(--border-radius-md);
-    gap: 8px;
+    padding: 0;
+    gap: 10px;
   }
   
+  .url-input-form .input-wrapper {
+    padding: 2px;
+    border-radius: var(--border-radius-md);
+  }
+
   .url-input-form input {
-    padding: 10px 10px 10px 42px;
-    font-size: 0.9rem;
+    padding: 12px 12px 12px 42px;
+    font-size: 0.92rem;
   }
   
   .hero-buttons-group {
     width: 100%;
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
   }
   
   .hero-buttons-group button {
-    flex: 1;
-    height: 44px;
-    font-size: 0.9rem;
+    flex: 1 1 calc(50% - 6px);
+    height: 42px;
+    font-size: 0.88rem;
+    padding: 8px 12px;
+  }
+
+  .hero-buttons-group button#btn-scrape-submit {
+    flex: 1 1 100%;
   }
 
   /* Hide desktop dashboard tab bar */