From d4c3018429bbc5be0938f57c0c405c1d7963d1b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sat, 24 Jan 2026 16:37:08 +0000
Subject: [PATCH] refactor: Change search fields to horizontal layout

- Place Business Name, Location, and Validate button in same row
- Reduce padding and font sizes for compact inline layout
- Show abbreviated text on mobile (responsive)
- Use checkmark indicator for auto-detected location

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/components/ScraperTest.tsx | 51 +++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/web/components/ScraperTest.tsx b/web/components/ScraperTest.tsx
index b969637..e00bb3c 100644
--- a/web/components/ScraperTest.tsx
+++ b/web/components/ScraperTest.tsx
@@ -495,17 +495,17 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
         </div>
       </div>
 
-      {/* Search Interface - Split Fields */}
+      {/* Search Interface - Horizontal Layout */}
       <>
-          <div className="mb-4 space-y-3">
+          <div className="mb-4 flex gap-2 items-end">
             {/* Business Name Field */}
-            <div>
-              <label className="block text-sm font-semibold text-gray-700 mb-1">
+            <div className="flex-1">
+              <label className="block text-xs font-semibold text-gray-600 mb-1">
                 Business Name <span className="text-red-500">*</span>
               </label>
               <div className="relative">
-                <div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                   </svg>
                 </div>
@@ -520,25 +520,23 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
                       handleSearch();
                     }
                   }}
-                  placeholder="e.g., Starbucks, McDonald's, Hilton Hotel..."
-                  className="w-full pl-12 pr-4 py-3 text-gray-900 bg-white border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all"
+                  placeholder="Starbucks, McDonald's..."
+                  className="w-full pl-9 pr-3 py-2.5 text-gray-900 bg-white border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all text-sm"
                 />
               </div>
             </div>
 
             {/* Location Field */}
-            <div>
-              <label className="block text-sm font-semibold text-gray-700 mb-1">
+            <div className="flex-1">
+              <label className="block text-xs font-semibold text-gray-600 mb-1">
                 Location
                 {detectedLocation && (
-                  <span className="ml-2 text-xs font-normal text-green-600">
-                    (auto-detected from your IP)
-                  </span>
+                  <span className="ml-1 text-xs font-normal text-green-600">✓</span>
                 )}
               </label>
               <div className="relative">
-                <div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                   </svg>
@@ -553,8 +551,8 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
                       handleSearch();
                     }
                   }}
-                  placeholder={detectedLocation ? `${detectedLocation.city}, ${detectedLocation.country}` : "City, Country (e.g., New York, USA)"}
-                  className="w-full pl-12 pr-4 py-3 text-gray-900 bg-white border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all"
+                  placeholder={detectedLocation ? `${detectedLocation.city}, ${detectedLocation.country}` : "City, Country"}
+                  className="w-full pl-9 pr-3 py-2.5 text-gray-900 bg-white border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all text-sm"
                 />
               </div>
             </div>
@@ -563,7 +561,7 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
             <button
               onClick={handleSearch}
               disabled={!businessNameQuery.trim() || isCheckingReviews}
-              className={`w-full px-6 py-3 font-semibold rounded-xl transition-all flex items-center justify-center gap-2 ${
+              className={`px-5 py-2.5 font-semibold rounded-lg transition-all flex items-center gap-2 whitespace-nowrap ${
                 hasReviews === true && buildSearchQuery() === searchedQuery
                   ? 'bg-green-600 text-white hover:bg-green-700'
                   : hasReviews === false && buildSearchQuery() === searchedQuery
@@ -574,28 +572,29 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
               {isCheckingReviews ? (
                 <>
                   <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                  Validating...
+                  <span className="hidden sm:inline">Validating...</span>
                 </>
               ) : hasReviews === true && buildSearchQuery() === searchedQuery ? (
                 <>
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                   </svg>
-                  {availableReviewCount?.toLocaleString()} reviews found
+                  <span className="hidden sm:inline">{availableReviewCount?.toLocaleString()} reviews</span>
+                  <span className="sm:hidden">{availableReviewCount?.toLocaleString()}</span>
                 </>
               ) : hasReviews === false && buildSearchQuery() === searchedQuery ? (
                 <>
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                   </svg>
-                  No reviews found
+                  <span className="hidden sm:inline">Not found</span>
                 </>
               ) : (
                 <>
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                   </svg>
-                  Validate Business
+                  <span className="hidden sm:inline">Validate</span>
                 </>
               )}
             </button>