Rework status bar as overlay text

src/components/AppLayout.vue

@@ -11,6 +11,10 @@ const leftSidebarWidth = computed(() =>
   leftCollapsed.value ? '0' : 'var(--sidebar-width)'
 )
 
+const statusLeftOffset = computed(() =>
+  leftCollapsed.value ? 'var(--space-md)' : 'calc(var(--sidebar-width) + var(--space-md))'
+)
+
 function loadSidebarState() {
   try {
     const stored = localStorage.getItem(STORAGE_KEY)
@@ -67,11 +71,11 @@ onMounted(() => {
       <PropertiesPanel class="properties-panel">
         <slot name="properties-panel" />
       </PropertiesPanel>
-    </div>
 
-    <footer class="status-bar">
-      <slot name="status-bar" />
-    </footer>
+      <div class="status-text" :style="{ left: statusLeftOffset }">
+        <slot name="status" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -120,16 +124,13 @@ onMounted(() => {
   overflow: visible;
 }
 
-.status-bar {
-  flex-shrink: 0;
-  height: var(--status-bar-height);
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-md);
-  background: var(--color-bg-primary);
-  border-top: 1px solid var(--color-border);
+.status-text {
+  position: absolute;
+  bottom: var(--space-md);
   font-size: var(--font-size-sm);
   color: var(--color-text-muted);
+  pointer-events: none;
+  z-index: 1;
 }
 
 /* Responsive: auto-collapse left sidebar on narrow screens */
@@ -137,6 +138,10 @@ onMounted(() => {
   .left-sidebar {
     width: 0 !important;
   }
+
+  .status-text {
+    left: var(--space-md) !important;
+  }
 }
 
 @media (max-width: 600px) {

src/style.css

@@ -48,7 +48,6 @@
 
   /* Layout */
   --header-height: 48px;
-  --status-bar-height: 24px;
   --sidebar-width: 240px;
 
   /* Borders */