From bac32e62b5432bf5fc5adac59536c62dd043b6fd Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Wed, 29 Apr 2026 19:13:34 +0000
Subject: [PATCH] Improve top bar layout and icon sizes for larger screens

Update `home.tsx` to make the top bar larger on medium screens and above, increasing icon sizes and padding for better usability on tablets and desktops.
---
 artifacts/tx-os/src/pages/home.tsx | 51 +++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/artifacts/tx-os/src/pages/home.tsx b/artifacts/tx-os/src/pages/home.tsx
index 43881f33..e6e24457 100644
--- a/artifacts/tx-os/src/pages/home.tsx
+++ b/artifacts/tx-os/src/pages/home.tsx
@@ -437,24 +437,34 @@ export default function HomePage() {
 
   return (
     <div className="min-h-screen os-bg flex flex-col overflow-hidden relative">
-      {/* Status Bar */}
-      <div className="topbar-glass px-4 sm:px-6 py-3 flex items-center justify-between gap-3 z-10 sticky top-0">
+      {/*
+        Status Bar
+        --------------------------------------------------------------
+        Sizing scales by device class so the bar feels natural at each
+        size — phones stay compact (the original design), iPad gets a
+        noticeably taller bar with bigger tap targets so it doesn't
+        look lost on a larger screen, and desktop matches iPad. We
+        switch at the `md:` breakpoint (≥768px), which is the standard
+        iPad-portrait threshold; mobile (<768px) renders identically
+        to before this change.
+      */}
+      <div className="topbar-glass px-4 sm:px-6 md:px-8 py-3 md:py-4 flex items-center justify-between gap-3 md:gap-5 z-10 sticky top-0">
         {/* Identity */}
-        <div className="flex items-center gap-2.5 min-w-0 shrink basis-0 flex-1">
-          <div className="w-9 h-9 rounded-full bg-primary/15 text-primary flex items-center justify-center font-bold text-sm shrink-0">
+        <div className="flex items-center gap-2.5 md:gap-3.5 min-w-0 shrink basis-0 flex-1">
+          <div className="w-9 h-9 md:w-12 md:h-12 rounded-full bg-primary/15 text-primary flex items-center justify-center font-bold text-sm md:text-lg shrink-0">
             {initials}
           </div>
           <div className="min-w-0 hidden sm:block">
-            <div className="text-foreground font-semibold text-sm truncate leading-tight">{displayName}</div>
+            <div className="text-foreground font-semibold text-sm md:text-base truncate leading-tight">{displayName}</div>
             {isAdmin && (
-              <div className="text-[10px] text-muted-foreground leading-tight">Admin</div>
+              <div className="text-[10px] md:text-xs text-muted-foreground leading-tight">Admin</div>
             )}
           </div>
         </div>
 
         {/* Clock + dates */}
         {topbarClockVisible && (
-          <div className="px-2 shrink-0">
+          <div className="px-2 md:px-3 shrink-0">
             <Clock
               style={user?.clockStyle ?? null}
               hour12={user?.clockHour12 ?? null}
@@ -464,8 +474,13 @@ export default function HomePage() {
           </div>
         )}
 
-        {/* Controls */}
-        <div className="flex items-center gap-1 shrink basis-0 flex-1 justify-end">
+        {/*
+          Controls — buttons grow on iPad+ via padding + icon size.
+          Lucide icons size via `width`/`height` SVG attrs; we drop the
+          numeric `size` prop and use Tailwind classes so the icon
+          itself can scale at the `md:` breakpoint.
+        */}
+        <div className="flex items-center gap-1 md:gap-2 shrink basis-0 flex-1 justify-end">
           <ClockStylePicker
             currentStyle={user?.clockStyle ?? null}
             currentHour12={user?.clockHour12 ?? null}
@@ -473,35 +488,35 @@ export default function HomePage() {
           <button
             onClick={toggleLanguage}
             aria-label="Toggle language"
-            className="text-muted-foreground hover:text-foreground transition-colors p-1.5 rounded-lg hover:bg-foreground/5"
+            className="text-muted-foreground hover:text-foreground transition-colors p-1.5 md:p-2.5 rounded-lg md:rounded-xl hover:bg-foreground/5"
           >
-            <Globe size={18} />
+            <Globe className="w-[18px] h-[18px] md:w-6 md:h-6" />
           </button>
           {canReceiveOrders && (
             <button
               onClick={() => setLocation("/orders/incoming")}
               aria-label={t("incomingOrders.linkLabel")}
-              className="p-1.5 rounded-lg hover:bg-foreground/5 text-muted-foreground hover:text-foreground transition-colors"
+              className="p-1.5 md:p-2.5 rounded-lg md:rounded-xl hover:bg-foreground/5 text-muted-foreground hover:text-foreground transition-colors"
             >
-              <Inbox size={18} />
+              <Inbox className="w-[18px] h-[18px] md:w-6 md:h-6" />
             </button>
           )}
           <button
             onClick={() => setLocation("/notifications")}
-            className="relative p-1.5 rounded-lg hover:bg-foreground/5 text-muted-foreground hover:text-foreground transition-colors"
+            className="relative p-1.5 md:p-2.5 rounded-lg md:rounded-xl hover:bg-foreground/5 text-muted-foreground hover:text-foreground transition-colors"
           >
-            <Bell size={18} />
+            <Bell className="w-[18px] h-[18px] md:w-6 md:h-6" />
             {unreadCount > 0 && (
-              <span className="absolute -top-0.5 -right-0.5 bg-destructive text-destructive-foreground text-[10px] rounded-full min-w-[16px] h-4 px-1 flex items-center justify-center font-bold tabular-nums">
+              <span className="absolute -top-0.5 -right-0.5 bg-destructive text-destructive-foreground text-[10px] md:text-xs rounded-full min-w-[16px] md:min-w-[20px] h-4 md:h-5 px-1 flex items-center justify-center font-bold tabular-nums">
                 {unreadCount > 9 ? "9+" : unreadCount}
               </span>
             )}
           </button>
           <button
             onClick={handleLogout}
-            className="p-1.5 rounded-lg hover:bg-foreground/5 text-muted-foreground hover:text-foreground transition-colors"
+            className="p-1.5 md:p-2.5 rounded-lg md:rounded-xl hover:bg-foreground/5 text-muted-foreground hover:text-foreground transition-colors"
           >
-            <LogOut size={18} />
+            <LogOut className="w-[18px] h-[18px] md:w-6 md:h-6" />
           </button>
         </div>
       </div>