From 5664a904a2e7e08a59bf39e2596ec38d0c2e2e73 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sun, 19 Apr 2026 19:06:19 +0300
Subject: [PATCH] refactor: compact component spacing throughout app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PHASE 3 - COMPONENT SPACING OPTIMIZATION:

components/IdentityCheckOverlay.tsx:
- Modal padding: p-8 sm:p-10 → p-4 md:p-6
- Spacing: space-y-8 → space-y-3 md:space-y-4

components/CameraView.tsx:
- Container gaps: gap-6 → gap-3 md:gap-4

components/AIOnboarding.tsx (4 fixes):
- Main sections: gap-6 → gap-3 md:gap-4
- Live mode: gap-6 → gap-3 md:gap-4
- Results form: gap-6 → gap-3 md:gap-4
- Step view: gap-6 → gap-3 md:gap-4

components/ScannerSection.tsx:
- Container spacing: space-y-6 → space-y-3 md:space-y-4
- Scanner section: space-y-4 → space-y-2 md:space-y-3

components/LogsTable.tsx (2 fixes):
- Empty state: gap-6 → gap-3 md:gap-4
- Modal: p-6 sm:p-10 space-y-8 → p-4 md:p-6 space-y-3 md:space-y-4

Results:
- All 291 tests passing
- Zero TypeScript errors
- Mobile-first spacing applied throughout
- Consistent responsive pattern across all components
---
 frontend/components/AIOnboarding.tsx         | 8 ++++----
 frontend/components/CameraView.tsx           | 2 +-
 frontend/components/IdentityCheckOverlay.tsx | 2 +-
 frontend/components/LogsTable.tsx            | 4 ++--
 frontend/components/ScannerSection.tsx       | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/components/AIOnboarding.tsx b/frontend/components/AIOnboarding.tsx
index a209e1bb..9632d597 100644
--- a/frontend/components/AIOnboarding.tsx
+++ b/frontend/components/AIOnboarding.tsx
@@ -66,7 +66,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
       </div>
 
       {!image && !isLive ? (
-        <div className="flex-1 flex flex-col gap-6 min-h-0">
+        <div className="flex-1 flex flex-col gap-3 md:gap-4 min-h-0">
           <div data-testid="multi-item-toggle" className="flex bg-surface/70 p-1.5 rounded-2xl border border-slate-800/50 shrink-0">
             <button
               onClick={() => setMode('item')}
@@ -124,7 +124,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
         </div>
       ) : isLive ? (
         // LIVE VIEWFINDER MODE
-        <div data-testid="wizard-step wizard-step-capture" className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
+        <div data-testid="wizard-step wizard-step-capture" className="flex-1 flex flex-col gap-3 md:gap-4 min-h-0 overflow-hidden">
           <div data-testid="capture-camera" className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-black">
             <video
               ref={videoRef}
@@ -175,7 +175,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
           </div>
         </div>
       ) : extractedItems.length === 0 ? (
-        <div data-testid="wizard-step" className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
+        <div data-testid="wizard-step" className="flex-1 flex flex-col gap-3 md:gap-4 min-h-0 overflow-hidden">
           <div className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-surface">
             <img src={image || undefined} className="w-full h-full object-contain" alt="Captured label" />
             <div className="absolute inset-0 bg-black/30 pointer-events-none" />
@@ -213,7 +213,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
           </div>
         </div>
       ) : editingIndex !== null ? (
-        <div data-testid="extraction-results-form" className="flex-1 flex flex-col gap-6 overflow-hidden">
+        <div data-testid="extraction-results-form" className="flex-1 flex flex-col gap-3 md:gap-4 overflow-hidden">
           <div data-testid="ai-onboarding-wizard" className="flex items-center justify-between">
               <span className="text-xs text-muted font-normal">Item Details (<span data-testid="current-step">{editingIndex + 1}</span>/<span data-testid="total-steps">{extractedItems.length}</span>)</span>
               <button
diff --git a/frontend/components/CameraView.tsx b/frontend/components/CameraView.tsx
index d70283f4..fd7c8d2e 100644
--- a/frontend/components/CameraView.tsx
+++ b/frontend/components/CameraView.tsx
@@ -42,7 +42,7 @@ export default function CameraView({
   const cn = (...classes: any[]) => classes.filter(Boolean).join(' ');
 
   return (
-    <div className="w-full max-w-md mx-auto flex flex-col gap-6">
+    <div className="w-full max-w-md mx-auto flex flex-col gap-3 md:gap-4">
       {/* Video Viewport Area */}
       <div className="relative w-full aspect-square overflow-hidden rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.5)] bg-background border-2 border-slate-800/50 p-4 sm:p-6">
         <div className="absolute inset-4 sm:inset-6 z-10 pointer-events-none flex items-center justify-center">
diff --git a/frontend/components/IdentityCheckOverlay.tsx b/frontend/components/IdentityCheckOverlay.tsx
index 97f49f2a..cc7a5907 100644
--- a/frontend/components/IdentityCheckOverlay.tsx
+++ b/frontend/components/IdentityCheckOverlay.tsx
@@ -61,7 +61,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
 
   return (
     <div data-testid="identity-check-overlay" className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-background/90 animate-in fade-in duration-500">
-      <div className="bg-surface border border-slate-800 rounded-[2.5rem] p-8 sm:p-10 max-w-sm w-full shadow-2xl space-y-8 animate-in zoom-in-95 duration-300 relative overflow-hidden">
+      <div className="bg-surface border border-slate-800 rounded-[2.5rem] p-4 md:p-6 max-w-sm w-full shadow-2xl space-y-3 md:space-y-4 animate-in zoom-in-95 duration-300 relative overflow-hidden">
         
         <div className="text-center space-y-3">
           <div className="w-20 h-20 bg-primary/10 text-primary rounded-[2rem] flex items-center justify-center mx-auto mb-6 border border-primary/20 shadow-xl shadow-primary/5">
diff --git a/frontend/components/LogsTable.tsx b/frontend/components/LogsTable.tsx
index 1781711d..41b546b0 100644
--- a/frontend/components/LogsTable.tsx
+++ b/frontend/components/LogsTable.tsx
@@ -34,7 +34,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
 
   if (logs.length === 0) {
     return (
-      <div className="bg-surface/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-6">
+      <div className="bg-surface/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-3 md:gap-4">
         <div className="w-16 h-16 bg-surface rounded-2xl flex items-center justify-center text-slate-700 border border-slate-800">
           <ArrowDownCircle size={32} />
         </div>
@@ -97,7 +97,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
       {/* Selected Log Modal */}
       {selectedLog && (
         <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/90 animate-in fade-in duration-300">
-          <div className="bg-surface border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[3rem] p-6 sm:p-10 max-w-lg w-full shadow-2xl space-y-8 animate-in slide-in-from-bottom-10 duration-300 overflow-hidden">
+          <div className="bg-surface border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[3rem] p-4 md:p-6 max-w-lg w-full shadow-2xl space-y-3 md:space-y-4 animate-in slide-in-from-bottom-10 duration-300 overflow-hidden">
             <div className="flex justify-between items-start">
               <div className="space-y-1 pr-4">
                 <div className={cn(
diff --git a/frontend/components/ScannerSection.tsx b/frontend/components/ScannerSection.tsx
index 83518022..bac290c7 100644
--- a/frontend/components/ScannerSection.tsx
+++ b/frontend/components/ScannerSection.tsx
@@ -30,7 +30,7 @@ export default function ScannerSection({
   onAddItemClick,
 }: ScannerSectionProps) {
   return (
-    <div className="w-full px-1 space-y-6">
+    <div className="w-full px-1 space-y-3 md:space-y-4">
       {/* Mode Switcher */}
       <div className="flex p-1.5 bg-surface rounded-2xl shadow-inner w-full gap-1">
         {[
@@ -56,7 +56,7 @@ export default function ScannerSection({
       {/* Scanner Section */}
       <section className="glass-card rounded-3xl p-6">
         {showScanner ? (
-          <div className="space-y-4">
+          <div className="space-y-2 md:space-y-3">
             <div className="flex justify-between items-center">
               <h2 className="text-lg font-normal">scanning...</h2>
               <button