refactor: optimize spacing on main pages (inventory, admin, logs, scanner)
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
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user