From 257cf6ed025da6f1d5310ffafff2e26257a65366 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Mon, 27 Apr 2026 02:20:28 +0200
Subject: [PATCH] fix: keep theme tooltip inside window

---
 src/components/StatusBar.test.tsx             | 21 +++++++++++++++++++
 .../status-bar/StatusBarSections.tsx          |  2 +-
 src/components/ui/action-tooltip.tsx          | 11 +++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

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(
+      <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(
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({
         </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"
diff --git a/src/components/ui/action-tooltip.tsx b/src/components/ui/action-tooltip.tsx
index 1a2c33e6..13a331d1 100644
--- a/src/components/ui/action-tooltip.tsx
+++ b/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 && (