From 0707092131018d63a8d1a87a2dfb25a4a0a472bc Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Tue, 21 Jul 2026 17:33:31 +0200
Subject: [PATCH] fix(app): preserve UI fonts in portaled overlays

The web UI font rule only targeted the app root, so portaled content fell back to the default font. Extend the rule to the shared overlay root and cover it with a browser regression test.
---
 packages/app/e2e/file-editing.spec.ts         | 21 +++++++++++++++++++
 .../appearance/apply-root-font.web.ts         |  3 ++-
 packages/app/src/styles/code-surface.ts       |  8 +++----
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/app/e2e/file-editing.spec.ts b/packages/app/e2e/file-editing.spec.ts
index 2a2c7dc11..e6d1cab4b 100644
--- a/packages/app/e2e/file-editing.spec.ts
+++ b/packages/app/e2e/file-editing.spec.ts
@@ -90,6 +90,27 @@ test.describe("CodeMirror workspace file editing", () => {
     await expect(selection).toHaveCSS("background-color", "rgba(255, 255, 255, 0.2)");
   });
 
+  test("applies the interface font to portaled tooltips", async ({ page, withWorkspace }) => {
+    await page.addInitScript(() => {
+      localStorage.setItem("@paseo:app-settings", JSON.stringify({ uiFontFamily: "monospace" }));
+    });
+    const workspace = await withWorkspace({ prefix: "file-tooltip-font-" });
+    const relativePath = "tooltip-font.txt";
+    await writeFile(path.join(workspace.repoPath, relativePath), "tooltip font\n", "utf8");
+    await workspace.navigateTo();
+    await openFileExplorer(page);
+    await openFileFromExplorer(page, relativePath);
+    await expectFileTabOpen(page, relativePath);
+
+    await page.getByTestId(`workspace-tab-file_${relativePath}`).first().hover();
+
+    await expect(
+      page
+        .getByTestId(`workspace-tab-tooltip-file_${relativePath}`)
+        .getByText(relativePath, { exact: true }),
+    ).toHaveCSS("font-family", "monospace");
+  });
+
   test("autosaves, saves immediately, resolves conflicts, and restores live updates after reconnect", async ({
     page,
     withWorkspace,
diff --git a/packages/app/src/screens/settings/appearance/apply-root-font.web.ts b/packages/app/src/screens/settings/appearance/apply-root-font.web.ts
index 3fdfe615c..16a263014 100644
--- a/packages/app/src/screens/settings/appearance/apply-root-font.web.ts
+++ b/packages/app/src/screens/settings/appearance/apply-root-font.web.ts
@@ -8,7 +8,8 @@
 // on stylesheet order. Code/diff/terminal surfaces carry `data-pmono` (and have their
 // subtree excluded via `:not([data-pmono] *)`) so they keep their monospace font.
 const STYLE_ID = "paseo-ui-font";
-const RULE = "#root *:not([data-pmono]):not([data-pmono] *){font-family:var(--paseo-ui-font);}";
+const RULE =
+  ":is(#root, #overlay-root) *:not([data-pmono]):not([data-pmono] *){font-family:var(--paseo-ui-font);}";
 
 export function applyRootUiFont(uiFontStack: string): void {
   if (typeof document === "undefined") return;
diff --git a/packages/app/src/styles/code-surface.ts b/packages/app/src/styles/code-surface.ts
index bdf20eed4..cd067ce52 100644
--- a/packages/app/src/styles/code-surface.ts
+++ b/packages/app/src/styles/code-surface.ts
@@ -1,7 +1,7 @@
 // Marker for code / diff / monospace surfaces. On web, the app-wide interface-font
 // rule (see screens/settings/appearance/apply-root-font.web.ts) targets
-// `#root *:not([data-pmono]):not([data-pmono] *)`, so tagging a code container with
-// this dataSet excludes it and its subtree — they keep their monospace font. On
-// native it renders nothing and is harmless. Use a shared stable reference so it
-// doesn't trip the react-perf "new object as prop" rule.
+// app and overlay roots while excluding `[data-pmono]` subtrees, so tagging a code
+// container with this dataSet keeps its monospace font. On native it renders nothing
+// and is harmless. Use a shared stable reference so it doesn't trip the react-perf
+// "new object as prop" rule.
 export const CODE_SURFACE_DATASET = { pmono: "" } as const;