refactor(admin): compact UI styling for data-dense admin interface

- Reduce table cell padding (px-5 py-4 → px-3 py-2) across OrderTableBody, ProductTableBody, StopTableBody, AdminTable
- Narrow sidebar (w-60 → w-56) with smaller nav items
- Reduce page/card padding in admin-design-system.css
- Smaller default buttons (md → sm) in AdminButton
- Smaller page headers (text-2xl → text-xl, w-12 → w-10 icon)
- Tighter cards and filter tabs

Makes admin UI feel like professional B2B tool at 100% zoom
This commit is contained in:
2026-06-02 14:55:42 +00:00
parent f53f72e5a2
commit 4095c62011
10 changed files with 50 additions and 49 deletions
+15 -14
View File
@@ -41,9 +41,9 @@
--admin-sidebar-active: #5c584f; /* between */
/* Spacing */
--admin-page-padding: 1.5rem; /* px-6 */
--admin-section-gap: 1rem; /* gap-4 */
--admin-card-padding: 1.25rem; /* p-5 */
--admin-page-padding: 1rem; /* px-4 - reduced for density */
--admin-section-gap: 0.75rem; /* gap-3 - reduced */
--admin-card-padding: 1rem; /* p-4 - reduced */
/* Border Radius */
--admin-radius-sm: 0.5rem; /* rounded-lg */
@@ -102,7 +102,7 @@
.admin-table {
width: 100%;
text-align: left;
font-size: 0.875rem; /* text-sm */
font-size: 0.8125rem; /* 13px - reduced for density */
}
.admin-table thead {
@@ -111,8 +111,8 @@
}
.admin-table th {
padding: 0.875rem 1.25rem; /* py-3.5 px-5 */
font-size: 0.625rem; /* text-[10px] */
padding: 0.75rem 1rem; /* py-3 px-4 - reduced for density */
font-size: 0.5625rem; /* text-9px - reduced */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
@@ -137,7 +137,8 @@
}
.admin-table td {
padding: 0.875rem 1.25rem; /* py-3.5 px-5 */
padding: 0.625rem 1rem; /* py-2.5 px-4 - reduced for density */
font-size: 0.8125rem; /* 13px - reduced */
}
/* === Admin Stats Bar === */
@@ -184,10 +185,10 @@
.admin-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
gap: 0.375rem;
padding: 0.375rem 0.75rem; /* reduced padding */
border-radius: var(--admin-radius-sm);
font-size: 0.75rem;
font-size: 0.6875rem; /* reduced from 0.75rem */
font-weight: 700;
transition: all 150ms;
}
@@ -216,11 +217,11 @@
.admin-input {
flex: 1;
min-width: 12rem;
padding: 0.625rem 0.75rem;
padding: 0.5rem 0.625rem; /* reduced padding */
background-color: var(--admin-card-bg);
border: 1px solid var(--admin-border);
border-radius: var(--admin-radius-sm);
font-size: 0.875rem;
font-size: 0.8125rem; /* 13px - reduced */
color: var(--admin-text-primary);
outline: none;
transition: border-color 150ms;
@@ -245,9 +246,9 @@
}
.admin-filter-tab {
padding: 0.5rem 0.75rem;
padding: 0.375rem 0.625rem; /* reduced padding */
border-radius: var(--admin-radius-sm);
font-size: 0.75rem;
font-size: 0.6875rem; /* reduced from 0.75rem */
font-weight: 600;
color: var(--admin-text-secondary);
transition: all 150ms;