diff --git a/src/components/StatusBar.test.tsx b/src/components/StatusBar.test.tsx index ffa94cfb..378383c5 100644 --- a/src/components/StatusBar.test.tsx +++ b/src/components/StatusBar.test.tsx @@ -131,6 +131,27 @@ describe('StatusBar', () => { expect(screen.queryByLabelText('Notifications are coming soon')).not.toBeInTheDocument() }) + it('end-aligns the theme tooltip to keep it inside the right window edge', async () => { + render( + , + ) + + act(() => { + fireEvent.focus(screen.getByTestId('status-theme-mode')) + }) + const tooltip = await screen.findByTestId('status-theme-mode-tooltip') + expect(tooltip).toHaveAttribute('data-align', 'end') + expect(tooltip).toHaveTextContent('Switch to dark mode') + }) + it('calls onToggleThemeMode from the bottom bar', () => { const onToggleThemeMode = vi.fn() render( diff --git a/src/components/status-bar/StatusBarSections.tsx b/src/components/status-bar/StatusBarSections.tsx index e0fa59b9..7da24e86 100644 --- a/src/components/status-bar/StatusBarSections.tsx +++ b/src/components/status-bar/StatusBarSections.tsx @@ -461,7 +461,7 @@ export function StatusBarSecondarySection({ )} {onOpenFeedback && } - + ['side'] align?: ComponentProps['align'] sideOffset?: number @@ -20,6 +21,7 @@ export function ActionTooltip({ copy, children, className, + contentTestId, side = 'top', align = 'center', sideOffset = 6, @@ -27,7 +29,14 @@ export function ActionTooltip({ return ( {children} - + {copy.label} {copy.shortcut && (