Skip to content

Commit f6f9ea5

Browse files
committed
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.
1 parent 4b04166 commit f6f9ea5

2 files changed

Lines changed: 13 additions & 8 deletions

File tree

src/components/layout/AppShell.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,9 @@ export function AppShell() {
102102
gives up exactly its height and stays the only scroll region. */}
103103
<TopBar onSearch={openSearch} />
104104
<div className="flex min-h-0 flex-1 flex-col p-2 pt-0 lg:p-3 lg:pl-0 lg:pt-3">
105-
<main className="min-h-0 flex-1 overflow-y-auto rounded border border-steel/20 bg-canvas">
105+
{/* Deliberate 8px exception to the 6px radius rule: the floating
106+
canvas alone reads better slightly softer at shell scale. */}
107+
<main className="min-h-0 flex-1 overflow-y-auto rounded-[8px] border border-steel/20 bg-canvas">
106108
<div className="mx-auto max-w-6xl p-4 sm:p-6 lg:p-8">
107109
<Outlet />
108110
</div>

src/components/layout/TopBar.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
1-
import { Search } from 'lucide-react';
1+
import { Command, Search } from 'lucide-react';
22
import { NotificationBell } from '../../features/notifications/components/NotificationBell';
33

44
interface TopBarProps {
55
/** Opens the command palette, optionally seeded with typed text. */
66
onSearch: (seed?: string) => void;
77
}
88

9-
const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
10-
119
/**
1210
* Desktop-only header strip on the outer shell surface, above the floating
1311
* content canvas: workspace search centered, the notification bell pinned to
1412
* the far right. Below lg these controls live in MobileTopBar instead.
1513
*/
1614
export function TopBar({ onSearch }: TopBarProps) {
1715
return (
18-
<div className="hidden shrink-0 grid-cols-[1fr_minmax(0,28rem)_1fr] items-center gap-2 px-3 pt-3 lg:grid">
16+
<div className="hidden shrink-0 grid-cols-[1fr_minmax(0,21rem)_1fr] items-center gap-2 px-3 pt-3 lg:grid">
1917
{/* Left spacer keeps the search truly centered despite the bell. */}
2018
<div aria-hidden="true" />
2119
{/* Real search input, centered on the shell. Focusing or typing hands
@@ -35,10 +33,15 @@ export function TopBar({ onSearch }: TopBarProps) {
3533
value=""
3634
onFocus={() => onSearch()}
3735
onChange={(event) => onSearch(event.target.value)}
38-
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"
36+
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"
3937
/>
40-
<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">
41-
{IS_MAC ? '⌘ K' : 'Ctrl K'}
38+
{/* Icon-based shortcut chip (Ctrl/⌘ + K opens the palette). */}
39+
<kbd
40+
aria-label="Shortcut: Control or Command plus K"
41+
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"
42+
>
43+
<Command size={11} aria-hidden="true" />
44+
K
4245
</kbd>
4346
</div>
4447
{/* Operational inbox at the far right of the outer shell; the bell's

0 commit comments

Comments
 (0)