From cd75a25ede4547c3b5f743d5184012d07fcaf611 Mon Sep 17 00:00:00 2001
From: giannatan <gltan9265@gmail.com>
Date: Thu, 14 May 2026 15:26:52 -0400
Subject: [PATCH 1/2] feat: added file name in center of status bar

---
 src/components/StatusBar.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index 72f4b6c..5c9a280 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -30,6 +30,7 @@ export default function StatusBar() {
   const zoom = useAppStore((s) => s.zoom);
   const cursorImageCoords = useAppStore((s) => s.cursorImageCoords);
   const activeClassId = useAppStore((s) => s.activeClassId);
+  const imageName = useAppStore((s) => s.imageName);
 
   const activeClass = CLASSES.find((c) => c.id === activeClassId);
 
@@ -43,7 +44,13 @@ export default function StatusBar() {
         {cursorImageCoords ? `X: ${cursorImageCoords[0]}  Y: ${cursorImageCoords[1]}` : '—'}
       </span>
 
-      {/* Spacer */}
+      {/* Spacer + centered filename */}
+      <div className="flex-1" />
+      {imageName && (
+        <span className="max-w-xs truncate" title={imageName}>
+          {imageName}
+        </span>
+      )}
       <div className="flex-1" />
 
       {/* Session saved indicator */}

From e394ca9a090c690e61058f6403f95e6e8bedfb4a Mon Sep 17 00:00:00 2001
From: giannatan <gltan9265@gmail.com>
Date: Thu, 14 May 2026 18:16:50 -0400
Subject: [PATCH 2/2] style: prevent filename text shift when zooming in by
 setting absolute position

---
 src/components/StatusBar.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index 5c9a280..7037ba8 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -35,7 +35,7 @@ export default function StatusBar() {
   const activeClass = CLASSES.find((c) => c.id === activeClassId);
 
   return (
-    <div className="h-8 bg-white border-t border-gray-200 flex items-center px-4 gap-6 text-xs text-gray-500 select-none">
+    <div className="h-8 bg-white border-t border-gray-200 relative flex items-center px-4 gap-6 text-xs text-gray-500 select-none">
       {/* Zoom */}
       <span className="tabular-nums">{Math.round(zoom * 100)}%</span>
 
@@ -44,14 +44,18 @@ export default function StatusBar() {
         {cursorImageCoords ? `X: ${cursorImageCoords[0]}  Y: ${cursorImageCoords[1]}` : '—'}
       </span>
 
-      {/* Spacer + centered filename */}
+      {/* Spacer */}
       <div className="flex-1" />
+
+      {/* Filename — absolutely centered so zoom % width changes don't shift it */}
       {imageName && (
-        <span className="max-w-xs truncate" title={imageName}>
+        <span
+          className="absolute left-1/2 -translate-x-1/2 max-w-xs truncate pointer-events-none"
+          title={imageName}
+        >
           {imageName}
         </span>
       )}
-      <div className="flex-1" />
 
       {/* Session saved indicator */}
       <SessionIndicator />