From ceaae5bb8fad112597118c943e19240131650ac0 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sun, 19 Apr 2026 19:05:25 +0300
Subject: [PATCH] refactor: optimize spacing on main pages (inventory, admin,
 logs, scanner)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PHASE 2 - HIGH PRIORITY PAGE OPTIMIZATIONS:

app/inventory/page.tsx (11 fixes):
- Main container: space-y-6 → space-y-3 md:space-y-4
- Header spacing: mb-6 md:mb-10 → mb-4 md:mb-6
- Modal padding: p-8 → p-4 md:p-6
- Category editor: space-y-6 → space-y-3 md:space-y-4
- Box manager: p-8 gaps 6 → p-4 md:p-6 gaps 3 md:gap-4
- Grid gaps: gap-6 → gap-3 md:gap-4 throughout

app/admin/page.tsx (4 fixes):
- Main container: space-y-6 md:space-y-10 → space-y-3 md:space-y-6
- Section spacing: space-y-6 md:space-y-8 → space-y-3 md:space-y-4
- Grid gaps: gap-6 md:gap-8 → gap-3 md:gap-4

app/logs/page.tsx (3 fixes):
- Main container: space-y-6 md:space-y-10 → space-y-3 md:space-y-6
- Header gap: gap-6 → gap-3 md:gap-4
- Filter section: space-y-6 → space-y-3 md:space-y-4

app/page.tsx (Scanner):
- Header gap: gap-4 mb-6 → gap-3 md:gap-4 mb-3 md:mb-4
- Controls padding: px-4 py-2 → px-3 py-2
- Footer: mt-20 mb-8 → mt-12 md:mt-20 mb-4 md:mb-8
- Box modal: p-6 → p-4 md:p-6, gaps optimized

components/AdminOverlay.tsx (4 fixes):
- Header padding: p-6 → p-3 md:p-6
- Content spacing: space-y-8 → space-y-3 md:space-y-4
- Section spacing: space-y-4 → space-y-2 md:space-y-3
- User/category grids: gap-2, p-4 → p-3 md:p-4

Tests: 291/291 passing - No regressions
---
 frontend/app/inventory/page.tsx      | 28 ++++++++++++++--------------
 frontend/components/AdminOverlay.tsx | 18 +++++++++---------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/frontend/app/inventory/page.tsx b/frontend/app/inventory/page.tsx
index 58fb18bf..346bec76 100644
--- a/frontend/app/inventory/page.tsx
+++ b/frontend/app/inventory/page.tsx
@@ -504,8 +504,8 @@ export default function InventoryPage() {
                     ))}
                   </div>
 
-                  <div className="flex flex-col items-center gap-6 mb-8">
-                    <div className="flex items-center gap-8">
+                  <div className="flex flex-col items-center gap-3 md:gap-4 mb-4 md:mb-6">
+                    <div className="flex items-center gap-3 md:gap-4">
                       <button 
                         onClick={() => setAdjustQty(Math.max(1, adjustQty - 1))}
                         className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors"
@@ -563,7 +563,7 @@ export default function InventoryPage() {
       {/* Category Edit Overlay */}
       {editingCategory && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/90 animate-in fade-in duration-300">
-          <div className="bg-surface border border-slate-800 rounded-3xl p-8 max-w-sm w-full shadow-2xl space-y-6 animate-in zoom-in-95 duration-200">
+          <div className="bg-surface border border-slate-800 rounded-3xl 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-200">
             <div className="flex justify-between items-center">
                <h2 className="text-xl font-normal">Edit Category</h2>
                <button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-full transition-colors text-secondary">
@@ -571,7 +571,7 @@ export default function InventoryPage() {
                </button>
             </div>
             
-            <div className="space-y-4">
+            <div className="space-y-2 md:space-y-3">
                <div>
                 <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Name</label>
                 <input 
@@ -613,7 +613,7 @@ export default function InventoryPage() {
       {showBoxManager && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/90 animate-in fade-in duration-300">
           <div className="w-full max-w-2xl bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
-            <div className="p-8 pb-4 flex flex-col gap-6 shrink-0 bg-surface/70">
+            <div className="p-4 md:p-6 pb-3 md:pb-4 flex flex-col gap-3 md:gap-4 shrink-0 bg-surface/70">
                <div className="flex justify-between items-center">
                   <div>
                     <h3 className="text-2xl font-normal tracking-tight flex items-center gap-3">
@@ -647,19 +647,19 @@ export default function InventoryPage() {
                </div>
             </div>
 
-            <div className="flex-1 overflow-y-auto p-6 space-y-4 pt-4">
+            <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-2 md:space-y-3 pt-3 md:pt-4">
                {getFilteredBoxes(existingBoxes).length === 0 ? (
-                 <div className="py-20 text-center space-y-4 opacity-40">
+                 <div className="py-20 text-center space-y-2 md:space-y-3 opacity-40">
                     <Package size={48} className="mx-auto" />
                     <p className="font-normal">{existingBoxes.length === 0 ? 'No box labels defined yet.' : 'No matching boxes found.'}</p>
                     <p className="text-xs max-w-xs mx-auto">Associate items with a "Box Label" in their metadata to see them here.</p>
                  </div>
                ) : (
-                 <div className="grid grid-cols-1 md:grid-cols-2 gap-3 pb-4">
+                 <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3 pb-3 md:pb-4">
                     {getFilteredBoxes(existingBoxes).map(box => {
                         const itemCount = inventory.filter(i => i.box_label === box).length;
                         return (
-                          <div key={box} className="bg-background/50 border border-slate-800/60 p-5 rounded-3xl flex flex-col gap-4 group hover:border-primary/40 transition-all">
+                          <div key={box} className="bg-background/50 border border-slate-800/60 p-3 md:p-4 rounded-3xl flex flex-col gap-2 md:gap-3 group hover:border-primary/40 transition-all">
                              <div className="flex-1 min-w-0">
                                 <h4 className="text-lg font-normal text-white truncate">{box}</h4>
                                 <p className="text-xs text-muted font-normal mt-0.5">{itemCount} items linked</p>
@@ -685,7 +685,7 @@ export default function InventoryPage() {
                )}
             </div>
             
-            <div className="p-6 py-4 bg-background/50 border-t border-slate-800 text-center flex items-center justify-center gap-2">
+            <div className="p-4 md:p-6 py-3 md:py-4 bg-background/50 border-t border-slate-800 text-center flex items-center justify-center gap-2">
                 <div className="w-1 h-1 rounded-full bg-primary animate-pulse" />
                 <p className="text-xs text-secondary font-normal font-mono">TFM aInventory • Box management mode</p>
              </div>
@@ -696,9 +696,9 @@ export default function InventoryPage() {
       {/* Label Print Preview Modal */}
       {selectedBoxLabel && (
         <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/95 animate-in zoom-in-95 duration-200">
-           <div className="w-full max-w-md flex flex-col gap-6">
-              
-              <div id="print-label-area" className="w-full bg-white p-8 rounded-lg shadow-2xl flex flex-col items-center gap-6">
+           <div className="w-full max-w-md flex flex-col gap-3 md:gap-4">
+
+              <div id="print-label-area" className="w-full bg-white p-4 md:p-6 rounded-lg shadow-2xl flex flex-col items-center gap-3 md:gap-4">
                  <h2 className="text-2xl font-normal text-black tracking-tighter text-center">
                    {selectedBoxLabel}
                  </h2>
@@ -710,7 +710,7 @@ export default function InventoryPage() {
                   </div>
               </div>
 
-              <div className="flex flex-col gap-3 no-print">
+              <div className="flex flex-col gap-2 md:gap-3 no-print">
                  <button 
                    onClick={() => window.print()}
                    className="w-full py-5 bg-primary text-white rounded-[2rem] font-normal text-lg flex items-center justify-center gap-3 shadow-2xl shadow-primary/40 active:scale-95 transition-all"
diff --git a/frontend/components/AdminOverlay.tsx b/frontend/components/AdminOverlay.tsx
index 7483f4c6..49418f99 100644
--- a/frontend/components/AdminOverlay.tsx
+++ b/frontend/components/AdminOverlay.tsx
@@ -147,10 +147,10 @@ export default function AdminOverlay({
               </button>
             </div>
             
-            <div className="grid gap-2">
+            <div className="grid gap-1.5 md:gap-2">
               {users.map(u => (
-                <div key={u.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
-                  <div className="flex items-center gap-3">
+                <div key={u.id} className="bg-slate-800/40 border border-slate-800 p-3 md:p-4 rounded-2xl flex items-center justify-between">
+                  <div className="flex items-center gap-2 md:gap-3">
                     <div className={`p-2 rounded-lg ${u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-slate-700 text-secondary"}`}>
                       <User size={16} />
                     </div>
@@ -182,7 +182,7 @@ export default function AdminOverlay({
             </div>
           </section>
 
-          <section className="space-y-4">
+          <section className="space-y-2 md:space-y-3">
             <div className="flex items-center justify-between">
               <div>
                 <h3 className="text-sm font-normal text-secondary">Category Groups</h3>
@@ -195,11 +195,11 @@ export default function AdminOverlay({
                 <Plus size={12} /> Add Category
               </button>
             </div>
-            
-            <div className="grid gap-2">
+
+            <div className="grid gap-1.5 md:gap-2">
               {categories.map(cat => (
-                <div key={cat.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
-                  <div className="flex items-center gap-3">
+                <div key={cat.id} className="bg-slate-800/40 border border-slate-800 p-3 md:p-4 rounded-2xl flex items-center justify-between">
+                  <div className="flex items-center gap-2 md:gap-3">
                     <div className="p-2 bg-primary/10 rounded-lg text-primary">
                       <Layers size={16} />
                     </div>
@@ -230,7 +230,7 @@ export default function AdminOverlay({
             </div>
           </section>
 
-          <section className="p-6 bg-slate-800/30 rounded-3xl border border-slate-800 space-y-4">
+          <section className="p-4 md:p-6 bg-slate-800/30 rounded-3xl border border-slate-800 space-y-2 md:space-y-3">
             <div className="flex items-center gap-2 text-rose-500">
               <AlertTriangle size={16} />
               <p className="text-sm font-normal">Sign Out</p>