Merge branch 'main' into pr-735

src/components/StatusBar.test.tsx

@@ -553,7 +553,7 @@ describe('StatusBar', () => {
   })
 
   it('collapses status labels to icon-first controls at very narrow widths', () => {
-    setWindowWidth(880)
+    setWindowWidth(920)
     renderDenseStatusBar()
 
     expect(screen.getByTestId('status-bar')).toHaveStyle({
@@ -574,8 +574,21 @@ describe('StatusBar', () => {
     expect(screen.queryByText('Claude Code missing')).not.toBeInTheDocument()
   })
 
+  it('stacks the footer into two rows once the narrow-width breakpoint is crossed', () => {
+    setWindowWidth(900)
+    renderDenseStatusBar()
+
+    expect(screen.getByTestId('status-bar')).toHaveStyle({
+      flexWrap: 'wrap',
+      height: 'auto',
+    })
+    expect(screen.getByTestId('status-commit-push')).toBeInTheDocument()
+    expect(screen.getByTestId('status-pulse')).toBeInTheDocument()
+    expect(screen.getByTestId('status-feedback')).toBeInTheDocument()
+  })
+
   it('hides the active AI agent label in compact status layout', () => {
-    setWindowWidth(880)
+    setWindowWidth(920)
     render(
       <StatusBar
         noteCount={100}

src/components/StatusBar.tsx

@@ -18,6 +18,7 @@ import type { VaultOption } from './status-bar/types'
 export type { VaultOption } from './status-bar/types'
 
 const COMPACT_STATUS_BAR_MAX_WIDTH = 1000
+const STACKED_STATUS_BAR_MAX_WIDTH = 900
 const STATUS_BAR_STACKING_Z_INDEX = 30
 
 function getWindowWidth() {
@@ -26,10 +27,11 @@ function getWindowWidth() {
 
 function getStatusBarLayout(windowWidth: number) {
   const compact = windowWidth <= COMPACT_STATUS_BAR_MAX_WIDTH
+  const stacked = windowWidth <= STACKED_STATUS_BAR_MAX_WIDTH
 
   return {
     compact,
-    stacked: false,
+    stacked,
   }
 }