From cb8725e2d95a32e17d73b2d428286dba1ec99fc7 Mon Sep 17 00:00:00 2001
From: Leonidas Zhak <70497898+LeonidasZhak@users.noreply.github.com>
Date: Wed, 1 Jul 2026 07:00:52 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20use=20shared=20settings?=
 =?UTF-8?q?=20header=20tooltips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace native title tooltips in the mobile settings header with the shared tooltip component so the controls use the same portal-backed tooltip behavior as the rest of the app.

---

_Generated with `mux` • Model: `GPT-5` • Thinking: `unknown` • Cost: ``_

<!-- mux-attribution: model=GPT-5 thinking=unknown costs=unknown -->
---
 .../features/Settings/SettingsPage.tsx        | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/browser/features/Settings/SettingsPage.tsx b/src/browser/features/Settings/SettingsPage.tsx
index e51f292602..0978788dc6 100644
--- a/src/browser/features/Settings/SettingsPage.tsx
+++ b/src/browser/features/Settings/SettingsPage.tsx
@@ -18,6 +18,7 @@ import {
   Lock,
 } from "lucide-react";
 import { useSettings } from "@/browser/contexts/SettingsContext";
+import { TooltipIfPresent } from "@/browser/components/Tooltip/Tooltip";
 import { useOnboardingPause } from "@/browser/features/SplashScreens/SplashScreenProvider";
 import { useExperimentValue } from "@/browser/hooks/useExperiments";
 import { isEditableElement, KEYBINDS, matchesKeybind } from "@/browser/utils/ui/keybinds";
@@ -227,30 +228,32 @@ export function SettingsPage(props: SettingsPageProps) {
       >
         <div className="flex min-w-0 items-center gap-2">
           {props.leftSidebarCollapsed && (
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={props.onToggleLeftSidebarCollapsed}
-              title="Open sidebar"
-              aria-label="Open sidebar menu"
-              className="mobile-menu-btn text-muted hover:text-foreground hidden h-6 w-6 shrink-0"
-            >
-              <Menu className="h-4 w-4" />
-            </Button>
+            <TooltipIfPresent tooltip="Open sidebar" side="bottom">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={props.onToggleLeftSidebarCollapsed}
+                aria-label="Open sidebar menu"
+                className="mobile-menu-btn text-muted hover:text-foreground hidden h-6 w-6 shrink-0"
+              >
+                <Menu className="h-4 w-4" />
+              </Button>
+            </TooltipIfPresent>
           )}
           <span className="text-foreground text-sm font-semibold">Settings</span>
         </div>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={close}
-          title="Back"
-          aria-label="Back to previous page"
-          className="text-muted hover:text-foreground px-2"
-        >
-          <ArrowLeft className="h-3.5 w-3.5" />
-          Back
-        </Button>
+        <TooltipIfPresent tooltip="Back" side="bottom">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={close}
+            aria-label="Back to previous page"
+            className="text-muted hover:text-foreground px-2"
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+            Back
+          </Button>
+        </TooltipIfPresent>
       </div>
 
       <div className="flex min-h-0 flex-1 overflow-hidden">