From 85a868702045c8fdc88e86a14e2942a548971f6e Mon Sep 17 00:00:00 2001
From: Wild Karl-Heinz <kh.wild@wicom.li>
Date: Wed, 2 Sep 2026 15:43:48 +0200
Subject: [PATCH] Merge sheet tabs and status bar into one row

SheetTabs and StatusBar were two stacked full-width bars, each with its
own background/border. Wrapped them in a shared .bottom-bar flex row in
App.vue instead: the tab list shrinks and scrolls internally to make
room, the status bar is pinned to the right and scrolls internally
rather than wrapping, so the combined row stays a single line even at
narrow (375px) viewports.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/App.vue                  | 12 ++++++++++--
 src/components/SheetTabs.vue |  5 +++--
 src/components/StatusBar.vue | 16 ++++++++--------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4e92fdb..af62a9c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,8 +50,10 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onGlobalKeydown));
       <SettingsPanel />
     </main>
 
-    <SheetTabs />
-    <StatusBar />
+    <div class="bottom-bar">
+      <SheetTabs />
+      <StatusBar />
+    </div>
 
     <div class="toasts">
       <div
@@ -74,6 +76,12 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onGlobalKeydown));
   height: 100%;
   background: var(--bg);
 }
+.bottom-bar {
+  display: flex;
+  align-items: center;
+  background: var(--surface-2);
+  border-top: 1px solid var(--border);
+}
 .workspace {
   position: relative;
   flex: 1;
diff --git a/src/components/SheetTabs.vue b/src/components/SheetTabs.vue
index d006cf6..54fbbc7 100644
--- a/src/components/SheetTabs.vue
+++ b/src/components/SheetTabs.vue
@@ -86,14 +86,15 @@ function onDrop(i: number) {
   align-items: center;
   gap: 4px;
   padding: 4px 8px;
-  background: var(--surface-2);
-  border-top: 1px solid var(--border);
+  flex: 1 1 auto;
+  min-width: 60px;
 }
 .tab-list {
   display: flex;
   gap: 2px;
   overflow-x: auto;
   scrollbar-width: thin;
+  min-width: 0;
 }
 .tab {
   display: flex;
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index f449417..f42981c 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -12,7 +12,6 @@ const fmt = (n: number) =>
 <template>
   <div class="status-bar">
     <span class="range">{{ store.activeCellName.value }}</span>
-    <span class="spacer" />
     <span v-if="agg.count > 0" class="metric">Summe <b>{{ fmt(agg.sum) }}</b></span>
     <span v-if="agg.count > 0" class="metric">Mittel <b>{{ fmt(agg.avg) }}</b></span>
     <span class="metric">Anzahl <b>{{ agg.count }}</b></span>
@@ -21,20 +20,21 @@ const fmt = (n: number) =>
 </template>
 
 <style scoped>
+/* shares one row with SheetTabs.vue (see App.vue's .bottom-bar) -- pinned to
+   the right, scrolls internally rather than wrapping if it ever runs out of
+   room, so the combined row always stays a single line. */
 .status-bar {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 4px 16px;
+  flex: 0 1 auto;
+  gap: 4px 14px;
   padding: 5px 14px;
   font-size: 12px;
-  background: var(--surface-2);
-  border-top: 1px solid var(--border);
   color: var(--text-dim);
   font-variant-numeric: tabular-nums;
-}
-.spacer {
-  flex: 1;
+  white-space: nowrap;
+  overflow-x: auto;
+  scrollbar-width: thin;
 }
 .metric b {
   color: var(--text);