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:
2026-04-19 19:06:19 +03:00
parent ceaae5bb8f
commit 5664a904a2
5 changed files with 10 additions and 10 deletions

View File

@@ -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