From f6f9ea5ed7a0226fc25add93a6e8c2998cb7b993 Mon Sep 17 00:00:00 2001
From: TELVIN TEUM <telvinteum@ubunifucollege.com>
Date: Sat, 18 Jul 2026 10:47:53 +0300
Subject: [PATCH] Refine shell top bar and canvas styling

Polishes the app shell chrome by tightening the desktop top-bar search column, increasing input vertical padding, and switching the shortcut hint to an icon-based Cmd/Ctrl+K chip (removing platform sniffing via `navigator.platform`). It also applies a deliberate `rounded-[8px]` radius to the main floating canvas and documents this as an intentional design exception.
---
 src/components/layout/AppShell.tsx |  4 +++-
 src/components/layout/TopBar.tsx   | 17 ++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index f244c3e..f3be5a6 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -102,7 +102,9 @@ export function AppShell() {
             gives up exactly its height and stays the only scroll region. */}
         <TopBar onSearch={openSearch} />
         <div className="flex min-h-0 flex-1 flex-col p-2 pt-0 lg:p-3 lg:pl-0 lg:pt-3">
-          <main className="min-h-0 flex-1 overflow-y-auto rounded border border-steel/20 bg-canvas">
+          {/* Deliberate 8px exception to the 6px radius rule: the floating
+              canvas alone reads better slightly softer at shell scale. */}
+          <main className="min-h-0 flex-1 overflow-y-auto rounded-[8px] border border-steel/20 bg-canvas">
             <div className="mx-auto max-w-6xl p-4 sm:p-6 lg:p-8">
               <Outlet />
             </div>
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
index 8f338bb..6b67dea 100644
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -1,4 +1,4 @@
-import { Search } from 'lucide-react';
+import { Command, Search } from 'lucide-react';
 import { NotificationBell } from '../../features/notifications/components/NotificationBell';
 
 interface TopBarProps {
@@ -6,8 +6,6 @@ interface TopBarProps {
   onSearch: (seed?: string) => void;
 }
 
-const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
-
 /**
  * Desktop-only header strip on the outer shell surface, above the floating
  * content canvas: workspace search centered, the notification bell pinned to
@@ -15,7 +13,7 @@ const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
  */
 export function TopBar({ onSearch }: TopBarProps) {
   return (
-    <div className="hidden shrink-0 grid-cols-[1fr_minmax(0,28rem)_1fr] items-center gap-2 px-3 pt-3 lg:grid">
+    <div className="hidden shrink-0 grid-cols-[1fr_minmax(0,21rem)_1fr] items-center gap-2 px-3 pt-3 lg:grid">
       {/* Left spacer keeps the search truly centered despite the bell. */}
       <div aria-hidden="true" />
       {/* Real search input, centered on the shell. Focusing or typing hands
@@ -35,10 +33,15 @@ export function TopBar({ onSearch }: TopBarProps) {
           value=""
           onFocus={() => onSearch()}
           onChange={(event) => onSearch(event.target.value)}
-          className="w-full rounded border border-steel/20 bg-canvas py-1.5 pl-8 pr-14 text-sm text-charcoal transition-colors placeholder:text-steel hover:border-steel/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          className="w-full rounded border border-steel/20 bg-canvas py-2 pl-8 pr-14 text-sm text-charcoal transition-colors placeholder:text-steel hover:border-steel/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
         />
-        <kbd className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded border border-steel/20 bg-surface px-1.5 font-sans text-[11px] text-steel">
-          {IS_MAC ? '⌘ K' : 'Ctrl K'}
+        {/* Icon-based shortcut chip (Ctrl/⌘ + K opens the palette). */}
+        <kbd
+          aria-label="Shortcut: Control or Command plus K"
+          className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-0.5 rounded border border-steel/20 bg-surface px-1.5 py-0.5 font-sans text-[11px] text-steel"
+        >
+          <Command size={11} aria-hidden="true" />
+          K
         </kbd>
       </div>
       {/* Operational inbox at the far right of the outer shell; the bell's