davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent bottom bar wrap at narrow widths

Browse Source
This commit is contained in:
lucaronin
2026-04-26 12:12:05 +02:00
parent f58e9d8930
commit 768da9f955
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/StatusBar.test.tsx
View File

@@ -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', () => {

5
src/components/StatusBar.tsx
View File

@@ -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,
}
}