From 5cfebac9809ccd0bb0b0a67c259e25fa0e19281d Mon Sep 17 00:00:00 2001
From: Atharva0506 <atharvan.coder@gmail.com>
Date: Sat, 22 Aug 2026 11:18:44 +0530
Subject: [PATCH 1/4] feat(dashboard): compact spacing and a hamburger drawer
 for the sidebar

The dashboard nested four levels of horizontal padding and then applied an
inner max-w-7xl on top of a fixed sidebar, which left a wide dead gutter on
the right and pushed the invoice items well below the fold.

- Add src/utils/layout.js holding the page container, card, header and
  section-gap classes so the dashboard rhythm is tuned in one place instead
  of per-page magic classes.
- Drop the inner max-width from every dashboard page and trim the padding
  and section margins across Create Invoice, Create Multiple Invoices, Sent,
  Received, Request Invoices and Settings.
- Replace the mobile MUI Select with a hamburger that opens a slide-out
  Drawer. The nav list is extracted into DashboardNav and rendered by both
  the desktop rail and the drawer, so the two cannot drift apart. The
  hamburger doubles as the current-section label, and navigating closes the
  drawer instead of leaving the overlay parked over the new page.
- Fix the fixed-navbar offset: the navbar is h-24 but the main padding was
  pt-20, so content sat 16px underneath and only cleared it thanks to an
  unrelated mt-4 on the dashboard heading.
---
 frontend/src/page/Applayout.jsx           |   4 +-
 frontend/src/page/CreateInvoice.jsx       |  28 +-
 frontend/src/page/CreateInvoicesBatch.jsx |   9 +-
 frontend/src/page/GenerateLink.jsx        |   4 +-
 frontend/src/page/Home.jsx                | 350 ++++++++++------------
 frontend/src/page/ReceivedInvoice.jsx     |   6 +-
 frontend/src/page/SentInvoice.jsx         |   6 +-
 frontend/src/page/Settings.jsx            |   8 +-
 frontend/src/utils/layout.js              |  21 ++
 9 files changed, 213 insertions(+), 223 deletions(-)
 create mode 100644 frontend/src/utils/layout.js

diff --git a/frontend/src/page/Applayout.jsx b/frontend/src/page/Applayout.jsx
index 83feae16..7c2d0d42 100644
--- a/frontend/src/page/Applayout.jsx
+++ b/frontend/src/page/Applayout.jsx
@@ -8,7 +8,9 @@ function Applayout() {
   return (
     <div className="flex flex-col min-h-screen overflow-x-hidden bg-[#161920]">
       <Navbar />
-      <main className="flex-1 pt-20 w-full max-w-[100vw] overflow-x-hidden">
+      {/* Navbar is fixed at h-24, so the offset has to match it exactly —
+          pt-20 left content tucked 16px underneath. */}
+      <main className="flex-1 pt-24 w-full max-w-[100vw] overflow-x-hidden">
         <Outlet />
       </main>
     </div>
diff --git a/frontend/src/page/CreateInvoice.jsx b/frontend/src/page/CreateInvoice.jsx
index e9193482..40db8003 100644
--- a/frontend/src/page/CreateInvoice.jsx
+++ b/frontend/src/page/CreateInvoice.jsx
@@ -55,6 +55,7 @@ import { toInvoiceUserDetails } from "@/utils/userProfile";
 import { useUserProfile } from "@/hooks/useUserProfile";
 import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
 import SenderSummary from "@/components/SenderSummary";
+import { CARD, PAGE_CONTAINER } from "@/utils/layout";
 import toast from "react-hot-toast";
 import { storeInvoice } from "../services/invoiceStorage/invoiceDB.js";
 import { computeInvoiceHash } from "../services/relay/invoiceHashUtils.js";
@@ -798,7 +799,7 @@ function CreateInvoice() {
       </div>
 
       {showUnsupportedNetwork && (
-        <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6">
+        <div className={PAGE_CONTAINER}>
           <div className="bg-white border border-amber-200 rounded-lg p-6 shadow-sm">
             <h2 className="text-xl font-bold mb-2 text-gray-800">
               Unsupported network
@@ -812,16 +813,11 @@ function CreateInvoice() {
         </div>
       )}
 
-      <div
-        className={cn(
-          "w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6",
-          showUnsupportedNetwork && "hidden"
-        )}
-      >
+      <div className={cn(PAGE_CONTAINER, showUnsupportedNetwork && "hidden")}>
         {(searchParams.get("clientAddress") ||
           searchParams.get("amount") ||
           searchParams.get("description")) && (
-          <div className="mb-6 bg-green-50 border border-green-200 rounded-lg p-4 overflow-hidden">
+          <div className="mb-3 bg-green-50 border border-green-200 rounded-lg p-3 overflow-hidden">
             <div className="flex items-center gap-3">
               <CheckCircle2 className="h-5 w-5 text-green-600" />
               <div>
@@ -837,14 +833,14 @@ function CreateInvoice() {
           </div>
         )}
 
-        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 mb-4 sm:mb-6">
+        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 mb-3">
           <h2 className="text-xl sm:text-2xl font-bold text-white">
             Create New Invoice
           </h2>
           <SenderSummary />
         </div>
 
-        <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-3 sm:gap-4 mb-6 sm:mb-8 bg-gray-50 p-4 rounded-lg shadow-sm overflow-hidden">
+        <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-2 sm:gap-3 mb-3 sm:mb-4 bg-gray-50 p-3 rounded-lg shadow-sm overflow-hidden">
           <div className="flex items-center space-x-2 w-full sm:w-auto">
             <Label className="text-sm sm:text-md font-medium text-gray-700">
               Invoice #
@@ -915,9 +911,9 @@ function CreateInvoice() {
         <form onSubmit={handleSubmit}>
           {/* Client details and payment token sit side by side so the invoice
               items stay above the fold on desktop. */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8 items-start">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-3 sm:mb-4 items-start">
             {/* Client Information — the sender's own details come from Settings */}
-            <div className="w-full border border-gray-200 p-4 sm:p-6 rounded-lg shadow-sm bg-white overflow-hidden">
+            <div className={CARD}>
               <h3 className="text-base sm:text-lg font-semibold mb-4 text-gray-800">
                 Client Information
               </h3>
@@ -1122,7 +1118,7 @@ function CreateInvoice() {
               </div>
             </div>
 
-            <div className="bg-white p-4 sm:p-6 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+            <div className={CARD}>
               <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -1364,7 +1360,7 @@ function CreateInvoice() {
 
 
           {/* Invoice Items Section */}
-          <div className="mb-6 sm:mb-8">
+          <div className="mb-4">
             {/* Desktop Header - Hidden on mobile */}
             <div className="hidden md:grid bg-green-500 text-white py-3 px-4 rounded-t-lg font-medium text-sm gap-2 items-center" style={{ gridTemplateColumns: 'repeat(16, minmax(0, 1fr))' }}>
               <div className="col-span-4">DESCRIPTION</div>
@@ -1414,7 +1410,7 @@ function CreateInvoice() {
             </div>
 
             <div className="border border-gray-200 rounded-b-lg bg-white">
-              <div className="p-3 sm:p-4 space-y-4 md:space-y-3">
+              <div className="p-2 sm:p-3 space-y-3 md:space-y-2">
                 {itemData.map((item, index) => (
                   <div className="relative" key={item.id} style={{ zIndex: Math.max(1, 50 - index) }}>
                     {/* Mobile Layout - Stacked */}
@@ -1731,7 +1727,7 @@ function CreateInvoice() {
           </div>
 
           {/* Form Actions */}
-          <div className="flex flex-col-reverse sm:flex-row justify-between items-center gap-4 mt-6">
+          <div className="flex flex-col-reverse sm:flex-row justify-between items-center gap-3 mt-4 pb-4">
             <Button
               className="bg-green-600 hover:bg-green-700 px-8 py-2 text-white"
               type="submit"
diff --git a/frontend/src/page/CreateInvoicesBatch.jsx b/frontend/src/page/CreateInvoicesBatch.jsx
index dc1f1443..1a06422a 100644
--- a/frontend/src/page/CreateInvoicesBatch.jsx
+++ b/frontend/src/page/CreateInvoicesBatch.jsx
@@ -64,6 +64,7 @@ import { toInvoiceUserDetails } from "@/utils/userProfile";
 import { useUserProfile } from "@/hooks/useUserProfile";
 import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
 import SenderSummary from "@/components/SenderSummary";
+import { CARD, PAGE_CONTAINER, PAGE_HEADER, SECTION_GAP } from "@/utils/layout";
 
 import ProductAutocompleteInput from "@/components/ProductAutocompleteInput";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -835,9 +836,9 @@ function CreateInvoicesBatch() {
         />
       </div>
 
-      <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6">
+      <div className={PAGE_CONTAINER}>
         {/* Simple Header */}
-        <div className="mb-6 sm:mb-8">
+        <div className={PAGE_HEADER}>
           <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
             Create Multiple Invoices
           </h2>
@@ -849,7 +850,7 @@ function CreateInvoicesBatch() {
         </div>
 
         {/* Clean Date Selection */}
-        <div className="w-full bg-white p-4 sm:p-6 rounded-lg shadow-sm mb-6 sm:mb-8 border border-gray-200 overflow-hidden">
+        <div className={cn(CARD, SECTION_GAP)}>
           <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-4 sm:gap-6">
             <div className="flex items-center space-x-3 w-full sm:w-auto">
               <div className="flex items-center justify-center gap-3">
@@ -955,7 +956,7 @@ function CreateInvoicesBatch() {
 
         <form onSubmit={handleSubmit}>
           {/* Clean Token Selection */}
-          <div className="w-full mb-6 sm:mb-8 bg-white p-4 sm:p-6 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+          <div className={cn(CARD, SECTION_GAP)}>
             <h3 className="text-lg font-semibold text-gray-800 mb-4">
               Payment Currency
             </h3>
diff --git a/frontend/src/page/GenerateLink.jsx b/frontend/src/page/GenerateLink.jsx
index 7f19291d..623b4aa9 100644
--- a/frontend/src/page/GenerateLink.jsx
+++ b/frontend/src/page/GenerateLink.jsx
@@ -22,6 +22,8 @@ import { Badge } from "@/components/ui/badge";
 import { BrowserProvider, ethers } from "ethers";
 import { ERC20_ABI } from "@/contractsABI/ERC20_ABI";
 import { useTokenList } from "../hooks/useTokenList";
+import { PAGE_CONTAINER } from "@/utils/layout";
+import { cn } from "@/lib/utils";
 
 const GenerateLink = () => {
   const { address, isConnected, chainId } = useAccount();
@@ -130,7 +132,7 @@ const GenerateLink = () => {
         />
       </div>
 
-      <div className="w-full max-w-7xl mx-auto space-y-6 px-2 sm:px-4 md:px-6 transition-all duration-300">
+      <div className={cn(PAGE_CONTAINER, "space-y-4 transition-all duration-300")}>
         <div className="mb-6 sm:mb-8">
           <h2 className="text-xl sm:text-2xl font-bold text-white mb-2 flex items-center gap-2 sm:gap-3">
             <div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
diff --git a/frontend/src/page/Home.jsx b/frontend/src/page/Home.jsx
index 370365f5..f9724091 100644
--- a/frontend/src/page/Home.jsx
+++ b/frontend/src/page/Home.jsx
@@ -1,6 +1,6 @@
-// Home.js - Updated with Batch Creation AND Batch Payment sections
+// Home.js - dashboard shell: nav rail on desktop, slide-out drawer below lg
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import List from "@mui/material/List";
@@ -13,14 +13,102 @@ import DraftsIcon from "@mui/icons-material/Drafts";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import LinkIcon from "@mui/icons-material/Link";
 import SettingsIcon from "@mui/icons-material/Settings";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
 import { Outlet, useNavigate, useLocation } from "react-router-dom";
-import { FileStackIcon } from "lucide-react";
+import { FileStackIcon, Menu } from "lucide-react";
 import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
 import { useUserProfile } from "@/hooks/useUserProfile";
 
+const MENU_ITEMS = [
+  {
+    text: "Send Invoice",
+    icon: <AddCircleOutlineIcon />,
+    route: "create",
+    color: "#f472b6",
+  },
+  {
+    text: "Send Multiple Invoices",
+    icon: <FileStackIcon />,
+    route: "batch-invoice",
+    color: "#22c55e",
+  },
+  {
+    text: "Sent Invoices",
+    icon: <MailOutlineIcon />,
+    route: "sent",
+    color: "#4ade80",
+  },
+  {
+    text: "Request Invoices",
+    icon: <LinkIcon />,
+    route: "generate-link",
+    color: "#a78bfa",
+  },
+  {
+    text: "Received Invoices",
+    icon: <DraftsIcon />,
+    route: "pending",
+    color: "#60a5fa",
+  },
+  {
+    text: "Settings",
+    icon: <SettingsIcon />,
+    route: "settings",
+    color: "#9ca3af",
+  },
+];
+
+const SIDEBAR_WIDTH = 248;
+
+/**
+ * The dashboard navigation list. Rendered by both the permanent desktop rail
+ * and the mobile drawer so the two can never drift apart.
+ */
+function DashboardNav({ activeRoute, onNavigate }) {
+  return (
+    <List className="space-y-1" sx={{ py: 0 }}>
+      {MENU_ITEMS.map((item) => {
+        const isActive = activeRoute === item.route;
+
+        return (
+          <ListItem key={item.route} disablePadding className="text-white">
+            <ListItemButton
+              onClick={() => onNavigate(item.route)}
+              selected={isActive}
+              sx={{
+                borderRadius: "8px",
+                transition: "all 0.2s ease",
+                backgroundColor: isActive
+                  ? "rgba(255, 255, 255, 0.08)"
+                  : "transparent",
+                "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.05)" },
+                "&.Mui-selected": { borderLeft: `4px solid ${item.color}` },
+                padding: "9px 14px",
+              }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: "32px",
+                  color: item.color,
+                  fontSize: "1.15rem",
+                }}
+              >
+                {item.icon}
+              </ListItemIcon>
+              <ListItemText
+                primary={item.text}
+                primaryTypographyProps={{
+                  fontSize: "0.925rem",
+                  fontWeight: isActive ? 600 : 500,
+                }}
+              />
+            </ListItemButton>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}
+
 export default function Home() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -31,6 +119,7 @@ export default function Home() {
     dismissOnboarding,
   } = useUserProfile();
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [navOpen, setNavOpen] = useState(false);
 
   // First visit only: prompt for the sender details every invoice needs, once
   // storage has actually been read and once the user has not already skipped.
@@ -39,55 +128,22 @@ export default function Home() {
     setShowOnboarding(!hasProfile && !onboardingDismissed);
   }, [profileLoading, hasProfile, onboardingDismissed]);
 
-  // Get current active route for dropdown
-  const getCurrentRoute = () => {
-    const currentPath = location.pathname;
-    const matchedItem = menuItems.find(item => currentPath.includes(item.route));
-    return matchedItem ? matchedItem.route : 'create';
-  };
+  const activeRoute =
+    MENU_ITEMS.find((item) => location.pathname.includes(item.route))?.route ??
+    "create";
 
-  const handleDropdownChange = (event) => {
-    navigate(event.target.value);
-  };
+  const activeLabel =
+    MENU_ITEMS.find((item) => item.route === activeRoute)?.text ?? "Dashboard";
 
-  const menuItems = [
-    {
-      text: "Send Invoice",
-      icon: <AddCircleOutlineIcon />,
-      route: "create",
-      color: "#f472b6",
-    },
-    {
-      text: "Send Multiple Invoices",
-      icon: <FileStackIcon/>,
-      route: "batch-invoice",
-      color: "#22c55e",
+  // Navigating from the drawer has to close it, or the overlay stays parked
+  // over the page the user just asked for.
+  const handleNavigate = useCallback(
+    (route) => {
+      navigate(route);
+      setNavOpen(false);
     },
-    {
-      text: "Sent Invoices",
-      icon: <MailOutlineIcon />,
-      route: "sent",
-      color: "#4ade80",
-    },
-    {
-      text: "Request Invoices",
-      icon: <LinkIcon />,
-      route: "generate-link",
-      color: "#a78bfa",
-    },
-    {
-      text: "Received Invoices",
-      icon: <DraftsIcon />,
-      route: "pending",
-      color: "#60a5fa",
-    },
-    {
-      text: "Settings",
-      icon: <SettingsIcon />,
-      route: "settings",
-      color: "#9ca3af",
-    },
-  ];
+    [navigate]
+  );
 
   return (
     <>
@@ -97,154 +153,61 @@ export default function Home() {
         onSkip={dismissOnboarding}
       />
 
-      <div className="px-2 sm:px-4 md:px-6 lg:px-10">
-        <header className="mb-2">
-          <h1 className="text-xl sm:text-2xl mt-4 text-white">
+      <div className="px-3 sm:px-4 lg:px-6">
+        {/* Mobile / tablet: the hamburger doubles as the current-section label */}
+        <div className="flex items-center gap-2 py-2 lg:hidden">
+          <button
+            type="button"
+            onClick={() => setNavOpen(true)}
+            aria-label="Open dashboard menu"
+            aria-expanded={navOpen}
+            className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-white transition-colors hover:bg-white/10"
+          >
+            <Menu className="h-5 w-5" />
+            <span className="text-sm font-medium">{activeLabel}</span>
+          </button>
+        </div>
+
+        <Drawer
+          open={navOpen}
+          onClose={() => setNavOpen(false)}
+          ModalProps={{ keepMounted: true }}
+          sx={{
+            display: { xs: "block", lg: "none" },
+            "& .MuiDrawer-paper": {
+              width: SIDEBAR_WIDTH,
+              backgroundColor: "#161920",
+              borderRight: "1px solid rgba(255, 255, 255, 0.08)",
+              padding: "12px 8px",
+            },
+          }}
+        >
+          <p className="px-3 pb-2 text-sm text-white">
             Welcome <span className="font-medium text-green-400">Back!</span>
-          </h1>
-        </header>
+          </p>
+          <DashboardNav activeRoute={activeRoute} onNavigate={handleNavigate} />
+        </Drawer>
 
         <Box
           sx={{
             display: "flex",
             flexDirection: { xs: "column", lg: "row" },
-            minHeight: { xs: "auto", lg: "calc(100vh - 180px)" },
-            gap: { xs: "12px", sm: "24px" },
+            minHeight: { xs: "auto", lg: "calc(100vh - 130px)" },
+            gap: { xs: "8px", lg: "16px" },
           }}
         >
-          {/* Mobile Dropdown Menu */}
-          <Box
-            className="lg:hidden"
-            sx={{
-              width: "100%",
-              flexShrink: 0,
-            }}
-          >
-            <FormControl fullWidth>
-              <Select
-                value={getCurrentRoute()}
-                onChange={handleDropdownChange}
-                sx={{
-                  backgroundColor: "rgba(255, 255, 255, 0.05)",
-                  color: "white",
-                  borderRadius: "8px",
-                  "& .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "rgba(255, 255, 255, 0.1)",
-                  },
-                  "&:hover .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "rgba(255, 255, 255, 0.2)",
-                  },
-                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "rgba(255, 255, 255, 0.3)",
-                  },
-                  "& .MuiSvgIcon-root": {
-                    color: "white",
-                  },
-                }}
-                MenuProps={{
-                  PaperProps: {
-                    sx: {
-                      backgroundColor: "#1f2937",
-                      color: "white",
-                      "& .MuiMenuItem-root": {
-                        "&:hover": {
-                          backgroundColor: "rgba(255, 255, 255, 0.1)",
-                        },
-                        "&.Mui-selected": {
-                          backgroundColor: "rgba(255, 255, 255, 0.15)",
-                          "&:hover": {
-                            backgroundColor: "rgba(255, 255, 255, 0.2)",
-                          },
-                        },
-                      },
-                    },
-                  },
-                }}
-              >
-                {menuItems.map((item) => (
-                  <MenuItem key={item.route} value={item.route}>
-                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                      <Box sx={{ color: item.color, display: "flex", alignItems: "center" }}>
-                        {item.icon}
-                      </Box>
-                      <span>{item.text}</span>
-                    </Box>
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Box>
-
-          {/* Desktop Vertical Menu */}
+          {/* Desktop nav rail */}
           <Box
             className="hidden lg:block"
-            sx={{
-              width: { lg: "264px" },
-              flexShrink: 0,
-            }}
+            sx={{ width: { lg: `${SIDEBAR_WIDTH}px` }, flexShrink: 0 }}
           >
-            <Drawer
-              variant="permanent"
-              sx={{
-                "& .MuiDrawer-paper": {
-                  width: "100%",
-                  border: "none",
-                  backgroundColor: "transparent",
-                  position: "relative",
-                  height: "auto",
-                  top: 0,
-                  zIndex: 1,
-                },
-              }}
-            >
-              <List className="space-y-2">
-                {menuItems.map((item) => (
-                  <ListItem
-                    key={item.route}
-                    disablePadding
-                    className="text-white"
-                  >
-                    <ListItemButton
-                      onClick={() => navigate(item.route)}
-                      selected={location.pathname.includes(item.route)}
-                      sx={{
-                        borderRadius: "8px",
-                        transition: "all 0.2s ease",
-                        backgroundColor: location.pathname.includes(item.route)
-                          ? "rgba(255, 255, 255, 0.08)"
-                          : "transparent",
-                        "&:hover": {
-                          backgroundColor: "rgba(255, 255, 255, 0.05)",
-                        },
-                        "&.Mui-selected": {
-                          borderLeft: "4px solid " + item.color,
-                        },
-                        padding: "12px 16px",
-                      }}
-                    >
-                      <ListItemIcon
-                        sx={{
-                          minWidth: "36px",
-                          color: item.color,
-                          fontSize: "1.25rem",
-                        }}
-                      >
-                        {item.icon}
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={item.text}
-                        primaryTypographyProps={{
-                          fontSize: "1rem",
-                          fontWeight: location.pathname.includes(item.route)
-                            ? 600
-                            : 500,
-                        }}
-                      />
-                    </ListItemButton>
-                  </ListItem>
-                ))}
-              </List>
-            </Drawer>
+            <p className="px-3 pb-2 pt-1 text-base text-white">
+              Welcome <span className="font-medium text-green-400">Back!</span>
+            </p>
+            <DashboardNav
+              activeRoute={activeRoute}
+              onNavigate={handleNavigate}
+            />
           </Box>
 
           {/* Main Content */}
@@ -252,13 +215,12 @@ export default function Home() {
             component="main"
             sx={{
               flexGrow: 1,
-              px: { xs: 0, sm: 1 },
-              maxHeight: { xs: "none", lg: "calc(100vh - 180px)" },
+              minWidth: 0,
+              pl: { xs: 0, lg: 1.5 },
+              maxHeight: { xs: "none", lg: "calc(100vh - 130px)" },
               overflowY: { xs: "visible", lg: "auto" },
               scrollbarWidth: "none",
-              "&::-webkit-scrollbar": {
-                display: "none",
-              },
+              "&::-webkit-scrollbar": { display: "none" },
               transition: "all 0.3s ease",
               borderLeft: { lg: "2px solid #1f2937" },
             }}
diff --git a/frontend/src/page/ReceivedInvoice.jsx b/frontend/src/page/ReceivedInvoice.jsx
index 09f2da81..89863bbe 100644
--- a/frontend/src/page/ReceivedInvoice.jsx
+++ b/frontend/src/page/ReceivedInvoice.jsx
@@ -62,6 +62,8 @@ import ErrorIcon from "@mui/icons-material/Error";
 import WarningIcon from "@mui/icons-material/Warning";
 import { useTokenList } from "@/hooks/useTokenList";
 import WalletConnectionAlert from "@/components/WalletConnectionAlert";
+import { PAGE_CONTAINER } from "@/utils/layout";
+import { cn } from "@/lib/utils";
 
 const columns = [
   { id: "select", label: "", minWidth: 50 },
@@ -1045,8 +1047,8 @@ function ReceivedInvoice() {
           onDismiss={() => setShowWalletAlert(false)}
         />
       </div>
-      <div className=" md:p-6 ">
-        <div className="max-w-8xl mx-auto">
+      <div className={cn(PAGE_CONTAINER, "py-3 sm:py-4")}>
+        <div className="w-full">
           <div className="flex justify-between items-center mb-2">
             <div>
               <h2 className="text-2xl font-bold text-white">
diff --git a/frontend/src/page/SentInvoice.jsx b/frontend/src/page/SentInvoice.jsx
index cdd31134..83a9a1dd 100644
--- a/frontend/src/page/SentInvoice.jsx
+++ b/frontend/src/page/SentInvoice.jsx
@@ -56,6 +56,8 @@ import WarningIcon from "@mui/icons-material/Warning";
 import CurrencyExchangeIcon from "@mui/icons-material/CurrencyExchange";
 import { useTokenList } from "@/hooks/useTokenList";
 import WalletConnectionAlert from "@/components/WalletConnectionAlert";
+import { PAGE_CONTAINER } from "@/utils/layout";
+import { cn } from "@/lib/utils";
 
 const columns = [
   { id: "fname", label: "Client", minWidth: 120 },
@@ -600,8 +602,8 @@ function SentInvoice() {
           onDismiss={() => setShowWalletAlert(false)}
         />
       </div>
-      <div className=" md:p-6 ">
-        <div className="max-w-8xl mx-auto">
+      <div className={cn(PAGE_CONTAINER, "py-3 sm:py-4")}>
+        <div className="w-full">
           <div className="flex justify-between items-center mb-2">
             <div>
               <h2 className="text-2xl font-bold text-white">Sent Invoices</h2>
diff --git a/frontend/src/page/Settings.jsx b/frontend/src/page/Settings.jsx
index 26d04064..9d76cb85 100644
--- a/frontend/src/page/Settings.jsx
+++ b/frontend/src/page/Settings.jsx
@@ -1,5 +1,7 @@
 import ProductCatalogImport from "../components/ProductCatalogImport";
 import UserProfileSettings from "../components/UserProfileSettings";
+import { PAGE_CONTAINER, PAGE_HEADER } from "@/utils/layout";
+import { cn } from "@/lib/utils";
 
 const SETTINGS_SECTIONS = [
   {
@@ -20,8 +22,8 @@ const SETTINGS_SECTIONS = [
 
 function Settings() {
   return (
-    <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6 py-6">
-      <div className="mb-6 sm:mb-8">
+    <div className={cn(PAGE_CONTAINER, "py-3 sm:py-4")}>
+      <div className={PAGE_HEADER}>
         <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
           Settings
         </h2>
@@ -30,7 +32,7 @@ function Settings() {
         </p>
       </div>
 
-      <div className="space-y-6 sm:space-y-8">
+      <div className="space-y-4 sm:space-y-6">
         {SETTINGS_SECTIONS.map(({ id, title, description, Content }) => (
           <section key={id} id={id} className="scroll-mt-24">
             <div className="mb-4">
diff --git a/frontend/src/utils/layout.js b/frontend/src/utils/layout.js
new file mode 100644
index 00000000..6700b5e6
--- /dev/null
+++ b/frontend/src/utils/layout.js
@@ -0,0 +1,21 @@
+/**
+ * Shared spacing for the dashboard shell.
+ *
+ * The dashboard already constrains its content with a fixed sidebar, so pages
+ * add no max-width of their own — an inner `max-w-*` on top of that left a
+ * large dead gutter on wide screens. Keeping the rhythm here means the whole
+ * dashboard can be tuned in one place instead of per-page magic classes.
+ */
+
+/** Outer wrapper for a page rendered inside the dashboard outlet. */
+export const PAGE_CONTAINER = "w-full px-0 sm:px-1";
+
+/** Vertical gap between the major sections of a page. */
+export const SECTION_GAP = "mb-4 sm:mb-5";
+
+/** Standard white content card. */
+export const CARD =
+  "bg-white rounded-lg border border-gray-200 shadow-sm p-3 sm:p-4 overflow-hidden";
+
+/** Page title block: heading plus optional supporting line. */
+export const PAGE_HEADER = "mb-3 sm:mb-4";

From 41a96272aa91c98327ede8dfb68a07f5fae76a4c Mon Sep 17 00:00:00 2001
From: Atharva0506 <atharvan.coder@gmail.com>
Date: Sat, 22 Aug 2026 12:07:05 +0530
Subject: [PATCH 2/4] feat(dashboard): align page blocks and add a collapsible
 desktop rail

Removing the inner max-width fixed the dead right gutter but left the page
uncapped, which read as stretched. The cause turned out to be alignment
rather than width: the invoice meta bar stopped well short of the items
table below it, so the right edge was ragged.

- Share one gutter (SHELL) between the navbar and every page shell, so the
  logo, the wallet button and the page content sit on the same left and
  right edges. Treasure adopts it too.
- Give the meta bar, the Client/Payment row, the items table and the total
  row the same left and right edges, so the layout reads as deliberate at
  any width. Cards in the row stretch to equal height.
- Collapse the desktop rail to a 68px icon-only strip with tooltips; the
  choice persists in localStorage, read synchronously so the rail does not
  render expanded and then snap shut.
- Replace the sidebar greeting's empty space with the connected address and
  network, keeping the greeting above it.
- Cap the invoice total at a min-width instead of a third of the row, where
  the label and amount drifted apart on a wide screen.
- Settings: let each card own its heading rather than repeating the same
  title in the section above it.
---
 frontend/src/components/Navbar.jsx            |   6 +-
 .../src/components/UserProfileSettings.jsx    |  15 +-
 frontend/src/page/CreateInvoice.jsx           |  34 +--
 frontend/src/page/Home.jsx                    | 217 ++++++++++++++----
 frontend/src/page/Settings.jsx                |  30 +--
 frontend/src/page/Treasure.jsx                |   4 +-
 frontend/src/utils/layout.js                  |  20 +-
 7 files changed, 238 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 74ac36ed..4aac1632 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -10,6 +10,8 @@ import { motion, AnimatePresence } from "framer-motion";
 import CloseIcon from "@mui/icons-material/Close";
 import MenuIcon from "@mui/icons-material/Menu";
 import InfoIcon from "@mui/icons-material/Info";
+import { cn } from "@/lib/utils";
+import { SHELL } from "@/utils/layout";
 
 function Navbar() {
   const { address, isConnected } = useAccount();
@@ -138,7 +140,9 @@ function Navbar() {
         : "bg-[#161920]"
         }`}
     >
-      <div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 z-10">
+      {/* Shares the page shell's cap so the logo and wallet button line up with
+          the content edges instead of hugging the screen on a wide display. */}
+      <div className={cn(SHELL, "z-10")}>
         <div className="flex justify-between items-center h-24">
           <motion.div
             whileHover={{ scale: 1.05 }}
diff --git a/frontend/src/components/UserProfileSettings.jsx b/frontend/src/components/UserProfileSettings.jsx
index 02ce812a..9a5145fa 100644
--- a/frontend/src/components/UserProfileSettings.jsx
+++ b/frontend/src/components/UserProfileSettings.jsx
@@ -32,11 +32,16 @@ export default function UserProfileSettings() {
       onSubmit={handleSubmit}
       className="bg-white p-4 sm:p-6 rounded-xl border border-gray-100 shadow-sm"
     >
-      <div className="flex flex-wrap items-center justify-between gap-2 mb-4">
-        <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
-          <User className="text-gray-600 w-5 h-5" />
-          Your Information
-        </h3>
+      <div className="flex flex-wrap items-start justify-between gap-2 mb-4">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
+            <User className="text-gray-600 w-5 h-5" />
+            Your Information
+          </h3>
+          <p className="mt-0.5 text-sm text-gray-500">
+            Applied as the sender on every invoice. Saved on this device only.
+          </p>
+        </div>
         {!loading && isComplete && (
           <span className="flex items-center gap-1.5 text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded-full px-2.5 py-1">
             <CheckCircle2 className="h-3.5 w-3.5" />
diff --git a/frontend/src/page/CreateInvoice.jsx b/frontend/src/page/CreateInvoice.jsx
index 40db8003..f49947af 100644
--- a/frontend/src/page/CreateInvoice.jsx
+++ b/frontend/src/page/CreateInvoice.jsx
@@ -840,35 +840,39 @@ function CreateInvoice() {
           <SenderSummary />
         </div>
 
-        <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-2 sm:gap-3 mb-3 sm:mb-4 bg-gray-50 p-3 rounded-lg shadow-sm overflow-hidden">
+        {/* Full width so its right edge lands on the same line as the Payment
+            Currency card and the items table below. Every block on the page
+            shares one left and one right edge. */}
+        <div className="w-full flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-2 sm:gap-3 mb-3 sm:mb-4 bg-gray-50 p-3 rounded-lg shadow-sm overflow-hidden">
           <div className="flex items-center space-x-2 w-full sm:w-auto">
-            <Label className="text-sm sm:text-md font-medium text-gray-700">
+            <Label className="text-sm font-medium text-gray-700">
               Invoice #
             </Label>
             <Input
               value="1"
-              className="w-24 bg-gray-100 border-gray-300 text-gray-700"
+              className="w-16 bg-gray-100 border-gray-300 text-gray-700"
               disabled
             />
           </div>
 
           <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 w-full sm:w-auto">
-            <Label className="text-sm sm:text-md font-medium text-gray-700">
+            <Label className="text-sm font-medium text-gray-700">
               Issued Date
             </Label>
             <Button
+              type="button"
               className={cn(
-                "w-full sm:w-[220px] justify-start text-left font-normal bg-white border border-gray-300 text-gray-700 hover:bg-gray-50",
+                "w-full sm:w-auto justify-start text-left font-normal bg-white border border-gray-300 text-gray-700 hover:bg-gray-50",
                 !issueDate && "text-black"
               )}
             >
               <CalendarIcon className="mr-2 h-4 w-4" />
-              {format(issueDate, "PPP")}
+              {format(issueDate, "PP")}
             </Button>
           </div>
 
           <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 w-full sm:w-auto">
-            <Label className="text-sm sm:text-md font-medium text-gray-700">
+            <Label className="text-sm font-medium text-gray-700">
               Due Date
             </Label>
             <Popover>
@@ -876,13 +880,13 @@ function CreateInvoice() {
                 <Button
                   variant="outline"
                   className={cn(
-                    "w-full sm:w-[220px] justify-start text-left font-normal text-gray-700",
+                    "w-full sm:w-auto justify-start text-left font-normal text-gray-700",
                     !dueDate && "text-muted-foreground"
                   )}
                 >
                   <CalendarIcon className="mr-2 h-4 w-4" />
                   {dueDate ? (
-                    format(dueDate, "PPP")
+                    format(dueDate, "PP")
                   ) : (
                     <span className="text-gray-700">Pick a due date</span>
                   )}
@@ -911,7 +915,9 @@ function CreateInvoice() {
         <form onSubmit={handleSubmit}>
           {/* Client details and payment token sit side by side so the invoice
               items stay above the fold on desktop. */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-3 sm:mb-4 items-start">
+          {/* items-stretch keeps both cards the same height; the two differ a
+              lot in content and a ragged bottom edge reads as unfinished. */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-3 sm:mb-4 items-stretch">
             {/* Client Information — the sender's own details come from Settings */}
             <div className={CARD}>
               <h3 className="text-base sm:text-lg font-semibold mb-4 text-gray-800">
@@ -1706,8 +1712,10 @@ function CreateInvoice() {
                 Add Item
               </Button>
 
-              <div className="bg-gray-50 p-2 rounded-lg w-full md:w-1/3">
-                <div className="flex justify-between items-center mb-2">
+              {/* Capped rather than a fraction of the row: at 1/3 of a wide
+                  content column the label and amount drifted far apart. */}
+              <div className="bg-gray-50 p-2 rounded-lg w-full sm:w-auto sm:min-w-[260px]">
+                <div className="flex justify-between items-center gap-6">
                   <span className="font-medium text-gray-700">Total:</span>
                   <span className="font-bold text-lg text-black">
                     {totalAmountDue}{" "}
@@ -1718,7 +1726,7 @@ function CreateInvoice() {
                 </div>
                 {totalAmountError && (
                   <div className="flex items-center justify-end gap-1.5 mt-1 text-red-600">
-                    <AlertCircle className="w-4 h-4" />
+                    <AlertCircle className="w-4 h-4 shrink-0" />
                     <span className="text-sm font-medium">{totalAmountError}</span>
                   </div>
                 )}
diff --git a/frontend/src/page/Home.jsx b/frontend/src/page/Home.jsx
index f9724091..32b791c1 100644
--- a/frontend/src/page/Home.jsx
+++ b/frontend/src/page/Home.jsx
@@ -1,4 +1,4 @@
-// Home.js - dashboard shell: nav rail on desktop, slide-out drawer below lg
+// Home.js - dashboard shell: collapsible nav rail on desktop, drawer below lg
 
 import { useCallback, useEffect, useState } from "react";
 import Box from "@mui/material/Box";
@@ -8,15 +8,18 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
+import Tooltip from "@mui/material/Tooltip";
 import MailOutlineIcon from "@mui/icons-material/MailOutline";
 import DraftsIcon from "@mui/icons-material/Drafts";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import LinkIcon from "@mui/icons-material/Link";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { Outlet, useNavigate, useLocation } from "react-router-dom";
-import { FileStackIcon, Menu } from "lucide-react";
+import { FileStackIcon, Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { useAccount } from "wagmi";
 import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
 import { useUserProfile } from "@/hooks/useUserProfile";
+import { SHELL } from "@/utils/layout";
 
 const MENU_ITEMS = [
   {
@@ -57,13 +60,28 @@ const MENU_ITEMS = [
   },
 ];
 
-const SIDEBAR_WIDTH = 248;
+const RAIL_WIDTH = 248;
+const RAIL_WIDTH_COLLAPSED = 68;
+const RAIL_COLLAPSED_KEY = "chainvoice_dashboard_rail_collapsed";
 
 /**
- * The dashboard navigation list. Rendered by both the permanent desktop rail
- * and the mobile drawer so the two can never drift apart.
+ * Reads the rail preference synchronously. localStorage rather than the
+ * IndexedDB used for app data: an async read would render the rail expanded
+ * and then snap it closed on every load.
  */
-function DashboardNav({ activeRoute, onNavigate }) {
+const readRailCollapsed = () => {
+  try {
+    return window.localStorage.getItem(RAIL_COLLAPSED_KEY) === "true";
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * The dashboard navigation list. Rendered by the desktop rail (expanded or
+ * collapsed to icons) and by the mobile drawer, so the variants cannot drift.
+ */
+function DashboardNav({ activeRoute, onNavigate, collapsed = false }) {
   return (
     <List className="space-y-1" sx={{ py: 0 }}>
       {MENU_ITEMS.map((item) => {
@@ -71,37 +89,49 @@ function DashboardNav({ activeRoute, onNavigate }) {
 
         return (
           <ListItem key={item.route} disablePadding className="text-white">
-            <ListItemButton
-              onClick={() => onNavigate(item.route)}
-              selected={isActive}
-              sx={{
-                borderRadius: "8px",
-                transition: "all 0.2s ease",
-                backgroundColor: isActive
-                  ? "rgba(255, 255, 255, 0.08)"
-                  : "transparent",
-                "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.05)" },
-                "&.Mui-selected": { borderLeft: `4px solid ${item.color}` },
-                padding: "9px 14px",
-              }}
+            <Tooltip
+              title={collapsed ? item.text : ""}
+              placement="right"
+              arrow
+              disableHoverListener={!collapsed}
             >
-              <ListItemIcon
+              <ListItemButton
+                onClick={() => onNavigate(item.route)}
+                selected={isActive}
+                aria-label={item.text}
                 sx={{
-                  minWidth: "32px",
-                  color: item.color,
-                  fontSize: "1.15rem",
+                  borderRadius: "8px",
+                  transition: "all 0.2s ease",
+                  justifyContent: collapsed ? "center" : "flex-start",
+                  backgroundColor: isActive
+                    ? "rgba(255, 255, 255, 0.08)"
+                    : "transparent",
+                  "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.05)" },
+                  "&.Mui-selected": { borderLeft: `4px solid ${item.color}` },
+                  padding: collapsed ? "10px 0" : "9px 14px",
                 }}
               >
-                {item.icon}
-              </ListItemIcon>
-              <ListItemText
-                primary={item.text}
-                primaryTypographyProps={{
-                  fontSize: "0.925rem",
-                  fontWeight: isActive ? 600 : 500,
-                }}
-              />
-            </ListItemButton>
+                <ListItemIcon
+                  sx={{
+                    minWidth: collapsed ? 0 : "32px",
+                    justifyContent: "center",
+                    color: item.color,
+                    fontSize: "1.15rem",
+                  }}
+                >
+                  {item.icon}
+                </ListItemIcon>
+                {!collapsed && (
+                  <ListItemText
+                    primary={item.text}
+                    primaryTypographyProps={{
+                      fontSize: "0.925rem",
+                      fontWeight: isActive ? 600 : 500,
+                    }}
+                  />
+                )}
+              </ListItemButton>
+            </Tooltip>
           </ListItem>
         );
       })}
@@ -109,6 +139,64 @@ function DashboardNav({ activeRoute, onNavigate }) {
   );
 }
 
+/**
+ * Connected wallet and network, shown where the dashboard used to greet the
+ * user with text that carried no information.
+ */
+function WalletBadge({ collapsed = false }) {
+  // chain resolves from wagmi's configured list; undefined on an unsupported
+  // network, in which case the name is simply omitted.
+  const { address, isConnected, chain } = useAccount();
+  const chainName = chain?.name;
+
+  if (!isConnected || !address) {
+    return collapsed ? (
+      <Tooltip title="Wallet not connected" placement="right" arrow>
+        <div className="mx-auto mb-2 h-2 w-2 rounded-full bg-gray-500" />
+      </Tooltip>
+    ) : (
+      <p className="px-3 pb-2 text-xs text-gray-500">Wallet not connected</p>
+    );
+  }
+
+  const shortAddress = `${address.slice(0, 6)}…${address.slice(-4)}`;
+
+  if (collapsed) {
+    return (
+      <Tooltip
+        title={`${shortAddress}${chainName ? ` · ${chainName}` : ""}`}
+        placement="right"
+        arrow
+      >
+        <div className="mx-auto mb-2 h-2 w-2 rounded-full bg-green-400" />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div className="px-3 pb-3">
+      <p className="font-mono text-sm text-white">{shortAddress}</p>
+      {chainName && (
+        <span className="mt-1 inline-flex items-center gap-1.5 text-xs text-gray-400">
+          <span className="h-1.5 w-1.5 rounded-full bg-green-400" />
+          {chainName}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/** The dashboard greeting, kept above the wallet details in both nav variants. */
+function RailGreeting({ collapsed = false }) {
+  if (collapsed) return null;
+
+  return (
+    <p className="px-3 pb-1 text-base text-white">
+      Welcome <span className="font-medium text-green-400">Back!</span>
+    </p>
+  );
+}
+
 export default function Home() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -120,6 +208,7 @@ export default function Home() {
   } = useUserProfile();
   const [showOnboarding, setShowOnboarding] = useState(false);
   const [navOpen, setNavOpen] = useState(false);
+  const [railCollapsed, setRailCollapsed] = useState(readRailCollapsed);
 
   // First visit only: prompt for the sender details every invoice needs, once
   // storage has actually been read and once the user has not already skipped.
@@ -145,6 +234,20 @@ export default function Home() {
     [navigate]
   );
 
+  const toggleRail = useCallback(() => {
+    setRailCollapsed((prev) => {
+      const next = !prev;
+      try {
+        window.localStorage.setItem(RAIL_COLLAPSED_KEY, String(next));
+      } catch {
+        // A lost preference is not worth failing the interaction over.
+      }
+      return next;
+    });
+  }, []);
+
+  const railWidth = railCollapsed ? RAIL_WIDTH_COLLAPSED : RAIL_WIDTH;
+
   return (
     <>
       <OnboardingProfileDialog
@@ -153,7 +256,8 @@ export default function Home() {
         onSkip={dismissOnboarding}
       />
 
-      <div className="px-3 sm:px-4 lg:px-6">
+      {/* Same cap as the navbar, so the rail and content share its edges. */}
+      <div className={SHELL}>
         {/* Mobile / tablet: the hamburger doubles as the current-section label */}
         <div className="flex items-center gap-2 py-2 lg:hidden">
           <button
@@ -175,16 +279,15 @@ export default function Home() {
           sx={{
             display: { xs: "block", lg: "none" },
             "& .MuiDrawer-paper": {
-              width: SIDEBAR_WIDTH,
+              width: RAIL_WIDTH,
               backgroundColor: "#161920",
               borderRight: "1px solid rgba(255, 255, 255, 0.08)",
               padding: "12px 8px",
             },
           }}
         >
-          <p className="px-3 pb-2 text-sm text-white">
-            Welcome <span className="font-medium text-green-400">Back!</span>
-          </p>
+          <RailGreeting />
+          <WalletBadge />
           <DashboardNav activeRoute={activeRoute} onNavigate={handleNavigate} />
         </Drawer>
 
@@ -199,14 +302,44 @@ export default function Home() {
           {/* Desktop nav rail */}
           <Box
             className="hidden lg:block"
-            sx={{ width: { lg: `${SIDEBAR_WIDTH}px` }, flexShrink: 0 }}
+            sx={{
+              width: { lg: `${railWidth}px` },
+              flexShrink: 0,
+              transition: "width 0.2s ease",
+            }}
           >
-            <p className="px-3 pb-2 pt-1 text-base text-white">
-              Welcome <span className="font-medium text-green-400">Back!</span>
-            </p>
+            <div
+              className={`flex items-center pb-2 pt-1 ${
+                railCollapsed ? "justify-center" : "justify-end px-2"
+              }`}
+            >
+              <Tooltip
+                title={railCollapsed ? "Expand menu" : "Collapse menu"}
+                placement="right"
+                arrow
+              >
+                <button
+                  type="button"
+                  onClick={toggleRail}
+                  aria-label={railCollapsed ? "Expand menu" : "Collapse menu"}
+                  aria-expanded={!railCollapsed}
+                  className="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-white/5 hover:text-white"
+                >
+                  {railCollapsed ? (
+                    <PanelLeftOpen className="h-5 w-5" />
+                  ) : (
+                    <PanelLeftClose className="h-5 w-5" />
+                  )}
+                </button>
+              </Tooltip>
+            </div>
+
+            <RailGreeting collapsed={railCollapsed} />
+            <WalletBadge collapsed={railCollapsed} />
             <DashboardNav
               activeRoute={activeRoute}
               onNavigate={handleNavigate}
+              collapsed={railCollapsed}
             />
           </Box>
 
diff --git a/frontend/src/page/Settings.jsx b/frontend/src/page/Settings.jsx
index 9d76cb85..43d333b7 100644
--- a/frontend/src/page/Settings.jsx
+++ b/frontend/src/page/Settings.jsx
@@ -3,42 +3,30 @@ import UserProfileSettings from "../components/UserProfileSettings";
 import { PAGE_CONTAINER, PAGE_HEADER } from "@/utils/layout";
 import { cn } from "@/lib/utils";
 
+/**
+ * Each card carries its own heading, so the page does not repeat the same
+ * title immediately above the card that already states it.
+ */
 const SETTINGS_SECTIONS = [
-  {
-    id: "your-information",
-    title: "Your Information",
-    description:
-      "The sender details applied to every invoice you create. Saved on this device only.",
-    Content: UserProfileSettings,
-  },
-  {
-    id: "product-catalog",
-    title: "Product Catalog",
-    description:
-      "Manage your products for quick access when creating invoices.",
-    Content: ProductCatalogImport,
-  },
+  { id: "your-information", Content: UserProfileSettings },
+  { id: "product-catalog", Content: ProductCatalogImport },
 ];
 
 function Settings() {
   return (
     <div className={cn(PAGE_CONTAINER, "py-3 sm:py-4")}>
       <div className={PAGE_HEADER}>
-        <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
+        <h2 className="text-2xl sm:text-3xl font-bold text-white mb-1">
           Settings
         </h2>
         <p className="text-sm sm:text-base text-gray-300">
-          Manage your account settings and product catalog
+          Manage your sender details and product catalog
         </p>
       </div>
 
       <div className="space-y-4 sm:space-y-6">
-        {SETTINGS_SECTIONS.map(({ id, title, description, Content }) => (
+        {SETTINGS_SECTIONS.map(({ id, Content }) => (
           <section key={id} id={id} className="scroll-mt-24">
-            <div className="mb-4">
-              <h3 className="text-xl font-semibold text-white">{title}</h3>
-              <p className="text-sm text-gray-400">{description}</p>
-            </div>
             <Content />
           </section>
         ))}
diff --git a/frontend/src/page/Treasure.jsx b/frontend/src/page/Treasure.jsx
index c83301a1..c7c5b857 100644
--- a/frontend/src/page/Treasure.jsx
+++ b/frontend/src/page/Treasure.jsx
@@ -16,6 +16,8 @@ import {
 } from "lucide-react";
 import { motion } from "framer-motion";
 import toast from "react-hot-toast";
+import { cn } from "@/lib/utils";
+import { SHELL } from "@/utils/layout";
 
 const Treasure = () => {
   const [treasureAmount, setTreasureAmount] = useState(0);
@@ -174,7 +176,7 @@ const Treasure = () => {
   };
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div className={cn(SHELL, "py-10")}>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
diff --git a/frontend/src/utils/layout.js b/frontend/src/utils/layout.js
index 6700b5e6..b4a4a750 100644
--- a/frontend/src/utils/layout.js
+++ b/frontend/src/utils/layout.js
@@ -1,12 +1,22 @@
 /**
- * Shared spacing for the dashboard shell.
+ * Shared spacing for the app shell.
  *
- * The dashboard already constrains its content with a fixed sidebar, so pages
- * add no max-width of their own — an inner `max-w-*` on top of that left a
- * large dead gutter on wide screens. Keeping the rhythm here means the whole
- * dashboard can be tuned in one place instead of per-page magic classes.
+ * One width cap for the navbar and every page, so the logo, the nav links and
+ * the page content all line up on the same left and right edges. Pages add no
+ * max-width of their own — an inner `max-w-*` on top of the dashboard sidebar
+ * left a large dead gutter on one side only.
  */
 
+/**
+ * Gutter shared by the navbar and all page shells.
+ *
+ * No max-width: a cap wide enough to matter still left a visible band of dead
+ * space down both sides. What made the layout read as stretched was blocks not
+ * sharing a right edge, not the page being wide — so the blocks align instead
+ * and the shell simply uses the screen.
+ */
+export const SHELL = "mx-auto w-full px-3 sm:px-4 lg:px-6";
+
 /** Outer wrapper for a page rendered inside the dashboard outlet. */
 export const PAGE_CONTAINER = "w-full px-0 sm:px-1";
 

From 48d9f025eb6c34fc18982da85f8346e93b1e77bd Mon Sep 17 00:00:00 2001
From: Atharva0506 <atharvan.coder@gmail.com>
Date: Sat, 22 Aug 2026 12:15:16 +0530
Subject: [PATCH 3/4] refactor(dashboard): put the rail greeting on the
 toggle's row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sidebar header stacked three lines — greeting, address, network — and the
address and network were already shown in the navbar, so two of them were
duplication. Drop them and pair "Welcome Back!" with the collapse toggle on a
single row, which reclaims about 40px above the nav items.
---
 frontend/src/page/Home.jsx | 69 +++++++-------------------------------
 1 file changed, 12 insertions(+), 57 deletions(-)

diff --git a/frontend/src/page/Home.jsx b/frontend/src/page/Home.jsx
index 32b791c1..34423184 100644
--- a/frontend/src/page/Home.jsx
+++ b/frontend/src/page/Home.jsx
@@ -16,7 +16,6 @@ import LinkIcon from "@mui/icons-material/Link";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { Outlet, useNavigate, useLocation } from "react-router-dom";
 import { FileStackIcon, Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { useAccount } from "wagmi";
 import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
 import { useUserProfile } from "@/hooks/useUserProfile";
 import { SHELL } from "@/utils/layout";
@@ -140,58 +139,12 @@ function DashboardNav({ activeRoute, onNavigate, collapsed = false }) {
 }
 
 /**
- * Connected wallet and network, shown where the dashboard used to greet the
- * user with text that carried no information.
+ * The dashboard greeting. The connected address and network deliberately are
+ * not repeated here — the navbar already shows both.
  */
-function WalletBadge({ collapsed = false }) {
-  // chain resolves from wagmi's configured list; undefined on an unsupported
-  // network, in which case the name is simply omitted.
-  const { address, isConnected, chain } = useAccount();
-  const chainName = chain?.name;
-
-  if (!isConnected || !address) {
-    return collapsed ? (
-      <Tooltip title="Wallet not connected" placement="right" arrow>
-        <div className="mx-auto mb-2 h-2 w-2 rounded-full bg-gray-500" />
-      </Tooltip>
-    ) : (
-      <p className="px-3 pb-2 text-xs text-gray-500">Wallet not connected</p>
-    );
-  }
-
-  const shortAddress = `${address.slice(0, 6)}…${address.slice(-4)}`;
-
-  if (collapsed) {
-    return (
-      <Tooltip
-        title={`${shortAddress}${chainName ? ` · ${chainName}` : ""}`}
-        placement="right"
-        arrow
-      >
-        <div className="mx-auto mb-2 h-2 w-2 rounded-full bg-green-400" />
-      </Tooltip>
-    );
-  }
-
-  return (
-    <div className="px-3 pb-3">
-      <p className="font-mono text-sm text-white">{shortAddress}</p>
-      {chainName && (
-        <span className="mt-1 inline-flex items-center gap-1.5 text-xs text-gray-400">
-          <span className="h-1.5 w-1.5 rounded-full bg-green-400" />
-          {chainName}
-        </span>
-      )}
-    </div>
-  );
-}
-
-/** The dashboard greeting, kept above the wallet details in both nav variants. */
-function RailGreeting({ collapsed = false }) {
-  if (collapsed) return null;
-
+function RailGreeting() {
   return (
-    <p className="px-3 pb-1 text-base text-white">
+    <p className="text-base text-white">
       Welcome <span className="font-medium text-green-400">Back!</span>
     </p>
   );
@@ -286,8 +239,9 @@ export default function Home() {
             },
           }}
         >
-          <RailGreeting />
-          <WalletBadge />
+          <div className="px-3 pb-2">
+            <RailGreeting />
+          </div>
           <DashboardNav activeRoute={activeRoute} onNavigate={handleNavigate} />
         </Drawer>
 
@@ -308,11 +262,14 @@ export default function Home() {
               transition: "width 0.2s ease",
             }}
           >
+            {/* Greeting and the collapse toggle share one row; collapsed, only
+                the toggle remains. */}
             <div
-              className={`flex items-center pb-2 pt-1 ${
-                railCollapsed ? "justify-center" : "justify-end px-2"
+              className={`flex items-center gap-2 pb-2 pt-1 ${
+                railCollapsed ? "justify-center" : "justify-between px-3"
               }`}
             >
+              {!railCollapsed && <RailGreeting />}
               <Tooltip
                 title={railCollapsed ? "Expand menu" : "Collapse menu"}
                 placement="right"
@@ -334,8 +291,6 @@ export default function Home() {
               </Tooltip>
             </div>
 
-            <RailGreeting collapsed={railCollapsed} />
-            <WalletBadge collapsed={railCollapsed} />
             <DashboardNav
               activeRoute={activeRoute}
               onNavigate={handleNavigate}

From 0c09e95ed19c3b6fda40c7d934c57b56b5bc5af9 Mon Sep 17 00:00:00 2001
From: Atharva0506 <atharvan.coder@gmail.com>
Date: Sat, 29 Aug 2026 19:45:18 +0530
Subject: [PATCH 4/4] fix(dashboard): close the nav drawer at lg and tidy the
 shell helpers

Addresses CodeRabbit review on #205.

- The drawer was hidden by MUI's lg (1200px) while the hamburger and rail
  use Tailwind's (1024px), so between the two the drawer stayed mounted with
  nothing visible to close it. It is now keyed to 1024px like the rest, and
  closes when the viewport crosses that width so the modal cannot leave the
  body scroll locked. The hamburger gets aria-controls for the drawer.
- toggleRail wrote to localStorage inside the state updater. Updaters are
  expected to be pure and React may call them more than once per dispatch,
  so the write now happens before setState.
- SHELL dropped its max-width earlier but the comments still described a
  width cap, and mx-auto had nothing to centre once w-full was the only
  width. Reworded and removed.
---
 frontend/src/components/Navbar.jsx |  4 +--
 frontend/src/page/Home.jsx         | 47 ++++++++++++++++++++++--------
 frontend/src/utils/layout.js       |  4 +--
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 4aac1632..52623f43 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -140,8 +140,8 @@ function Navbar() {
         : "bg-[#161920]"
         }`}
     >
-      {/* Shares the page shell's cap so the logo and wallet button line up with
-          the content edges instead of hugging the screen on a wide display. */}
+      {/* Shares the page shell's gutter so the logo and wallet button line up
+          with the content edges. */}
       <div className={cn(SHELL, "z-10")}>
         <div className="flex justify-between items-center h-24">
           <motion.div
diff --git a/frontend/src/page/Home.jsx b/frontend/src/page/Home.jsx
index 34423184..a103c793 100644
--- a/frontend/src/page/Home.jsx
+++ b/frontend/src/page/Home.jsx
@@ -62,6 +62,12 @@ const MENU_ITEMS = [
 const RAIL_WIDTH = 248;
 const RAIL_WIDTH_COLLAPSED = 68;
 const RAIL_COLLAPSED_KEY = "chainvoice_dashboard_rail_collapsed";
+const NAV_DRAWER_ID = "dashboard-nav-drawer";
+
+// Tailwind's lg, which the hamburger and the rail are keyed to. MUI's own `lg`
+// is 1200px, so relying on it here would leave the drawer mounted between
+// 1024px and 1199px where the hamburger that closes it is already hidden.
+const LG_QUERY = "(min-width: 1024px)";
 
 /**
  * Reads the rail preference synchronously. localStorage rather than the
@@ -170,6 +176,20 @@ export default function Home() {
     setShowOnboarding(!hasProfile && !onboardingDismissed);
   }, [profileLoading, hasProfile, onboardingDismissed]);
 
+  // Widening past lg hides the drawer and its hamburger by CSS, but the modal
+  // would stay open and keep the body scroll locked with nothing left to close
+  // it. Closing on the breakpoint keeps state and layout in step.
+  useEffect(() => {
+    const mq = window.matchMedia(LG_QUERY);
+    const handleChange = (e) => {
+      if (e.matches) setNavOpen(false);
+    };
+
+    handleChange(mq);
+    mq.addEventListener("change", handleChange);
+    return () => mq.removeEventListener("change", handleChange);
+  }, []);
+
   const activeRoute =
     MENU_ITEMS.find((item) => location.pathname.includes(item.route))?.route ??
     "create";
@@ -187,17 +207,17 @@ export default function Home() {
     [navigate]
   );
 
+  // The write stays outside the updater: React may call an updater more than
+  // once per dispatch, and updaters are expected to be pure.
   const toggleRail = useCallback(() => {
-    setRailCollapsed((prev) => {
-      const next = !prev;
-      try {
-        window.localStorage.setItem(RAIL_COLLAPSED_KEY, String(next));
-      } catch {
-        // A lost preference is not worth failing the interaction over.
-      }
-      return next;
-    });
-  }, []);
+    const next = !railCollapsed;
+    try {
+      window.localStorage.setItem(RAIL_COLLAPSED_KEY, String(next));
+    } catch {
+      // A lost preference is not worth failing the interaction over.
+    }
+    setRailCollapsed(next);
+  }, [railCollapsed]);
 
   const railWidth = railCollapsed ? RAIL_WIDTH_COLLAPSED : RAIL_WIDTH;
 
@@ -209,7 +229,7 @@ export default function Home() {
         onSkip={dismissOnboarding}
       />
 
-      {/* Same cap as the navbar, so the rail and content share its edges. */}
+      {/* Same gutter as the navbar, so the rail and content share its edges. */}
       <div className={SHELL}>
         {/* Mobile / tablet: the hamburger doubles as the current-section label */}
         <div className="flex items-center gap-2 py-2 lg:hidden">
@@ -218,6 +238,7 @@ export default function Home() {
             onClick={() => setNavOpen(true)}
             aria-label="Open dashboard menu"
             aria-expanded={navOpen}
+            aria-controls={NAV_DRAWER_ID}
             className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-white transition-colors hover:bg-white/10"
           >
             <Menu className="h-5 w-5" />
@@ -226,11 +247,13 @@ export default function Home() {
         </div>
 
         <Drawer
+          id={NAV_DRAWER_ID}
           open={navOpen}
           onClose={() => setNavOpen(false)}
           ModalProps={{ keepMounted: true }}
           sx={{
-            display: { xs: "block", lg: "none" },
+            display: "block",
+            [`@media ${LG_QUERY}`]: { display: "none" },
             "& .MuiDrawer-paper": {
               width: RAIL_WIDTH,
               backgroundColor: "#161920",
diff --git a/frontend/src/utils/layout.js b/frontend/src/utils/layout.js
index b4a4a750..d99f6d22 100644
--- a/frontend/src/utils/layout.js
+++ b/frontend/src/utils/layout.js
@@ -1,7 +1,7 @@
 /**
  * Shared spacing for the app shell.
  *
- * One width cap for the navbar and every page, so the logo, the nav links and
+ * One gutter for the navbar and every page, so the logo, the nav links and
  * the page content all line up on the same left and right edges. Pages add no
  * max-width of their own — an inner `max-w-*` on top of the dashboard sidebar
  * left a large dead gutter on one side only.
@@ -15,7 +15,7 @@
  * sharing a right edge, not the page being wide — so the blocks align instead
  * and the shell simply uses the screen.
  */
-export const SHELL = "mx-auto w-full px-3 sm:px-4 lg:px-6";
+export const SHELL = "w-full px-3 sm:px-4 lg:px-6";
 
 /** Outer wrapper for a page rendered inside the dashboard outlet. */
 export const PAGE_CONTAINER = "w-full px-0 sm:px-1";