refactor: compact component spacing throughout app
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
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user