fix: keep theme tooltip inside window

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(
+      <StatusBar
+        noteCount={100}
+        vaultPath="/Users/luca/Laputa"
+        vaults={vaults}
+        onSwitchVault={vi.fn()}
+        themeMode="light"
+        onToggleThemeMode={vi.fn()}
+        onOpenSettings={vi.fn()}
+      />,
+    )
+
+    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(

src/components/status-bar/StatusBarSections.tsx

@@ -461,7 +461,7 @@ export function StatusBarSecondarySection({
         </ActionTooltip>
       )}
       {onOpenFeedback && <FeedbackButton compact={compact} locale={locale} onOpenFeedback={onOpenFeedback} />}
-      <ActionTooltip copy={themeTooltip} side="top">
+      <ActionTooltip copy={themeTooltip} side="top" align="end" contentTestId="status-theme-mode-tooltip">
         <Button
           type="button"
           variant="ghost"

src/components/ui/action-tooltip.tsx

@@ -11,6 +11,7 @@ interface ActionTooltipProps {
   copy: ActionTooltipCopy
   children: ReactNode
   className?: string
+  contentTestId?: string
   side?: ComponentProps<typeof TooltipContent>['side']
   align?: ComponentProps<typeof TooltipContent>['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 (
     <Tooltip>
       <TooltipTrigger asChild>{children}</TooltipTrigger>
-      <TooltipContent side={side} align={align} sideOffset={sideOffset} className={cn('px-2.5 py-2', className)}>
+      <TooltipContent
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        data-align={align}
+        data-testid={contentTestId}
+        className={cn('px-2.5 py-2', className)}
+      >
         <div className="flex min-w-0 items-center gap-3">
           <span className="min-w-0 flex-1 text-[11px] font-medium leading-tight">{copy.label}</span>
           {copy.shortcut && (