From ac2a156a1f9dbbfa0b8acc15e7ea279c039963ff Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 3 Jul 2026 10:02:22 +0200
Subject: [PATCH] style(view): overlay compact top bar

---
 view/App.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/view/App.tsx b/view/App.tsx
index 2244efc..c8de23c 100644
--- a/view/App.tsx
+++ b/view/App.tsx
@@ -12,16 +12,14 @@ export function App({ app }: AppProps) {
   const zoomPercent = Math.round(state.editor.viewport.zoom * 100);
 
   return (
-    <main className="flex h-full flex-col bg-background text-foreground">
-      <header className="flex h-12 items-center justify-between border-b px-4">
-        <h1 className="font-semibold">Image Studio</h1>
-        <div className="text-sm text-muted-foreground">
+    <main className="relative h-full bg-background text-foreground">
+      <header className="pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between px-3 text-white">
+        <h1 className="text-sm font-medium">Image Studio</h1>
+        <div className="text-xs">
           {state.document.name} · {zoomPercent}% · {state.editor.viewport.size.w}×{state.editor.viewport.size.h}
         </div>
       </header>
-      <section className="min-h-0 flex-1 bg-muted">
-        <CanvasViewport store={app.store} />
-      </section>
+      <CanvasViewport store={app.store} />
     </main>
   );
 }