bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: optimize spacing on main pages (inventory, admin, logs, scanner)

Browse Source 
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:
Daniel Bedeleanu
2026-04-19 19:05:25 +03:00
parent 2cbc036eb2
commit ceaae5bb8f
2 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/components/AdminOverlay.tsx
View File

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