From bed0942d1244b2391632df26d039aa27d41579a1 Mon Sep 17 00:00:00 2001
From: Ashwin Kumar <ashwin@macbookair.home>
Date: Fri, 27 Mar 2026 20:10:08 +0100
Subject: [PATCH] fix: dashboard layout spacing and CSS cascade layer bug

Move CSS reset into @layer base so Tailwind utilities aren't overridden.
Fix settings panel: search icon overlap, cramped widget items, spacing
between header card and widget grid using inline margin styles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app.css                |  4 +-
 src/routes/admin/index.tsx | 95 ++++++++++++++++++++++----------------
 2 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/src/app.css b/src/app.css
index a5f16e3..a787453 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,7 +21,9 @@
   --font-family-sans: 'Exo 2', sans-serif;
 }
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
+@layer base {
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+}
 
 body {
   font-family: 'Exo 2', sans-serif;
diff --git a/src/routes/admin/index.tsx b/src/routes/admin/index.tsx
index 3a642d2..1b773ba 100644
--- a/src/routes/admin/index.tsx
+++ b/src/routes/admin/index.tsx
@@ -322,18 +322,18 @@ export default function AdminHomePage() {
 
   return (
     <AdminShell>
-      <div class="w-full bg-[#F9FAFB] pb-12">
-        <div class="overflow-hidden rounded-2xl border border-[#E5E7EB] bg-white px-8 pt-10 pb-12 shadow-sm md:px-10 md:pt-11 md:pb-13">
-          <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
-            <div class="max-w-3xl" style="padding-left: 40px; padding-right: 20px;">
-              <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Dashboard Overview</h1>
-              <p class="mt-1 text-[14px] text-[#6B7280]">Manage widget layout, visibility, sizing, and dashboard presentation</p>
+      <div class="w-full">
+        <div class="rounded-2xl border border-[#E5E7EB] bg-white px-6 py-5 shadow-sm md:px-8" style="margin-bottom: 28px">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h1 class="text-[22px] font-bold leading-tight text-[#111827]">Dashboard Overview</h1>
+              <p class="mt-0.5 text-[13px] text-[#6B7280]">Manage widget layout, visibility, sizing, and dashboard presentation</p>
             </div>
 
-            <div class="flex w-full lg:w-auto lg:justify-end" style="margin-right: 20px;">
+            <div class="flex shrink-0">
               <button
                 type="button"
-                class="inline-flex h-9 w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-xl bg-[#0D0D2A] px-4 text-[13px] font-semibold leading-none text-white shadow-sm lg:w-auto lg:min-w-[190px]"
+                class="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-xl bg-[#0D0D2A] px-5 text-[13px] font-semibold leading-none text-white shadow-sm"
                 onClick={() => {
                   const next = !settingsOpen();
                   setSettingsOpen(next);
@@ -347,14 +347,13 @@ export default function AdminHomePage() {
           </div>
         </div>
 
-        <div class={settingsOpen() ? 'h-10' : 'h-0'} />
-
         <Show when={settingsOpen()}>
-          <div class="rounded-2xl border border-[#E5E7EB] bg-white p-8 shadow-sm md:p-9">
-            <div class="flex flex-wrap items-center justify-between gap-4">
-              <div class="pl-2 pt-1">
+          <div class="rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-sm md:p-7">
+            {/* Settings header */}
+            <div class="flex flex-wrap items-start justify-between gap-4">
+              <div>
                 <h2 class="text-[15px] font-semibold text-[#111827]">Widget Settings</h2>
-                <p class="mt-2 text-[13px] text-[#6B7280]">Choose visible widgets and select a grid layout.</p>
+                <p class="mt-1 text-[13px] text-[#6B7280]">Choose visible widgets and select a grid layout.</p>
               </div>
               <button
                 type="button"
@@ -365,68 +364,83 @@ export default function AdminHomePage() {
                 Reset Layout
               </button>
             </div>
-            <div class="mt-6 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
-              <label class="relative">
-                <Search size={14} class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[#FA5014]" />
+
+            {/* Filter controls */}
+            <div class="mt-5 flex flex-wrap gap-3">
+              <div class="relative min-w-[200px] flex-1">
+                <Search size={14} class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[#FA5014]" style="z-index:1" />
                 <input
                   value={search()}
                   onInput={(event) => setSearch(event.currentTarget.value)}
                   placeholder="Search widgets"
-                  class="h-11 w-full rounded-lg border border-[#E5E7EB] bg-white pl-9 pr-3 text-sm text-[#111827] outline-none"
+                  class="h-10 w-full rounded-lg border border-[#E5E7EB] bg-white pl-10 pr-3 text-sm text-[#111827] outline-none focus:border-[#FA5014]"
                 />
-              </label>
+              </div>
 
               <select
-                class="h-11 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
+                class="h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
                 value={filterMode()}
                 onChange={(event) => setFilterMode(event.currentTarget.value as FilterMode)}
               >
-                <option value="all">Filter: All Widgets</option>
-                <option value="summary">Filter: Summary Widgets</option>
-                <option value="analytics">Filter: Analytical Widgets</option>
+                <option value="all">All Widgets</option>
+                <option value="summary">Summary Only</option>
+                <option value="analytics">Analytical Only</option>
               </select>
 
               <select
-                class="h-11 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
+                class="h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
                 value={sortMode()}
                 onChange={(event) => setSortMode(event.currentTarget.value as SortMode)}
               >
-                <option value="layout">Sort: Layout Order</option>
-                <option value="name">Sort: Name</option>
-                <option value="status">Sort: Status</option>
+                <option value="layout">Layout Order</option>
+                <option value="name">Name</option>
+                <option value="status">Status</option>
               </select>
 
               <select
-                class="h-11 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
+                class="h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-sm text-[#111827]"
                 value={gridLayout()}
                 onChange={(event) => setGridLayout(event.currentTarget.value as GridLayoutMode)}
               >
-                <option value="3x4">Grid: 3 x 4</option>
-                <option value="3x3">Grid: 3 x 3</option>
+                <option value="3x4">Grid 3 × 4</option>
+                <option value="3x3">Grid 3 × 3</option>
               </select>
             </div>
-            <div class="mt-6 grid gap-5 md:grid-cols-2">
+
+            {/* Widget list */}
+            <div class="mt-5 grid gap-3 md:grid-cols-2">
               <For each={ADMIN_DASHBOARD_WIDGETS}>
                 {(definition) => {
                   const visible = () => layout().visibility[definition.widgetKey] !== false;
+                  const meta = WIDGET_META[definition.widgetKey];
+                  const state = meta?.state || 'empty';
 
                   return (
-                    <div class="rounded-2xl border border-[#E5E7EB] bg-[#F9FAFB] px-4 py-5">
-                      <div class="flex items-center justify-between gap-3">
-                        <div>
-                          <p class="text-sm font-semibold text-[#111827]">{definition.title}</p>
-                          <p class="mt-0.5 text-[11px] font-semibold uppercase tracking-wide text-[#9CA3AF]">{definition.moduleKey}</p>
+                    <div class="flex items-center justify-between gap-4 rounded-xl border border-[#E5E7EB] bg-[#F9FAFB] px-4 py-4">
+                      <div class="flex items-center gap-3 min-w-0">
+                        <div class="shrink-0 text-[#FA5014]">
+                          {iconForWidget(definition.widgetKey)}
                         </div>
+                        <div class="min-w-0">
+                          <p class="text-sm font-semibold text-[#111827]">{definition.title}</p>
+                          <p class="mt-0.5 text-[11px] font-medium uppercase tracking-wide text-[#9CA3AF]">{definition.moduleKey}</p>
+                        </div>
+                      </div>
+                      <div class="flex shrink-0 items-center gap-2">
+                        <span class={`hidden rounded-full border px-2 py-0.5 text-[10px] font-semibold sm:inline-flex ${badgeClass(state)}`}>
+                          {meta?.statusLabel || 'No Data'}
+                        </span>
                         <button
                           type="button"
-                          class={`inline-flex h-8 items-center gap-1 rounded-md border px-3 text-xs font-semibold ${
+                          class={`inline-flex h-8 items-center gap-1.5 rounded-md border px-3 text-xs font-semibold ${
                             visible()
                               ? 'border-[#FDBA8C] bg-[#FFF1EB] text-[#FA5014]'
                               : 'border-[#E5E7EB] bg-white text-[#6B7280]'
                           }`}
                           onClick={() => setWidgetVisibility(definition.widgetKey, !visible())}
                         >
-                          {visible() ? <Eye size={13} class="text-[#FA5014]" /> : <EyeOff size={13} class="text-[#FA5014]" />} {visible() ? 'Visible' : 'Hidden'}
+                          {visible() ? <Eye size={12} /> : <EyeOff size={12} />}
+                          {visible() ? 'Visible' : 'Hidden'}
                         </button>
                       </div>
                     </div>
@@ -434,15 +448,14 @@ export default function AdminHomePage() {
                 }}
               </For>
             </div>
+
             <Show when={isAutoSaving() || autoSaveNotice()}>
               <p class="mt-4 text-xs text-[#6B7280]">{isAutoSaving() ? 'Saving layout...' : autoSaveNotice()}</p>
             </Show>
           </div>
         </Show>
 
-        <div class={settingsOpen() ? 'h-8' : 'h-12'} />
-
-        <div class="grid grid-cols-1 gap-7 xl:grid-cols-12">
+        <div class="grid grid-cols-1 gap-5 xl:grid-cols-12" style="margin-top: 28px">
             <For each={orderedWidgets()}>
               {(definition) => {
                 const meta = WIDGET_META[definition.widgetKey];