diff --git a/src/components/StatusBar.test.tsx b/src/components/StatusBar.test.tsx index 0467c9b2..f4bb021c 100644 --- a/src/components/StatusBar.test.tsx +++ b/src/components/StatusBar.test.tsx @@ -339,17 +339,20 @@ describe('StatusBar', () => { expect(screen.getByText('3')).toBeInTheDocument() }) - it('wraps the bottom bar before hiding labels at medium widths', () => { + it('keeps the bottom bar compact and unwrapped at medium widths', () => { setWindowWidth(980) renderDenseStatusBar() expect(screen.getByTestId('status-bar')).toHaveStyle({ - flexWrap: 'wrap', - height: 'auto', + flexWrap: 'nowrap', + height: '30px', }) - expect(screen.getByText('Commit')).toBeInTheDocument() - expect(screen.getByText('History')).toBeInTheDocument() - expect(screen.getByText('Contribute')).toBeInTheDocument() + expect(screen.getByTestId('status-commit-push')).toBeInTheDocument() + expect(screen.getByTestId('status-pulse')).toBeInTheDocument() + expect(screen.getByTestId('status-feedback')).toBeInTheDocument() + expect(screen.queryByText('Commit')).not.toBeInTheDocument() + expect(screen.queryByText('History')).not.toBeInTheDocument() + expect(screen.queryByText('Contribute')).not.toBeInTheDocument() }) it('collapses status labels to icon-first controls at very narrow widths', () => { diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx index 2f71969b..89d870a8 100644 --- a/src/components/StatusBar.tsx +++ b/src/components/StatusBar.tsx @@ -14,8 +14,7 @@ import type { VaultOption } from './status-bar/types' export type { VaultOption } from './status-bar/types' -const STACKED_STATUS_BAR_MAX_WIDTH = 1040 -const COMPACT_STATUS_BAR_MAX_WIDTH = 900 +const COMPACT_STATUS_BAR_MAX_WIDTH = 1000 function getWindowWidth() { return typeof window === 'undefined' ? Number.POSITIVE_INFINITY : window.innerWidth @@ -26,7 +25,7 @@ function getStatusBarLayout(windowWidth: number) { return { compact, - stacked: !compact && windowWidth <= STACKED_STATUS_BAR_MAX_WIDTH, + stacked: false, } }