ui/e2e/telegram.spec.ts

@@ -35,6 +35,37 @@ test('Telegram launch auto-authenticates into the lobby and applies the theme',
     .toBe('#101418');
 });
 
+test('tg-fullscreen header keeps a constant native-nav gap as the font scales', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: /guest/i }).click();
+  await expect(page.getByText('Your turn')).toBeVisible(); // the lobby header is present + settled
+
+  // Emulate Telegram fullscreen: the class + safe-area vars our header positions against.
+  await page.evaluate(() => {
+    const h = document.documentElement;
+    h.classList.add('tg-fullscreen');
+    h.style.setProperty('--tg-safe-top', '47px');
+    h.style.setProperty('--tg-content-top', '50px');
+  });
+  const probe = () =>
+    page.evaluate(() => {
+      const bar = document.querySelector('.bar')!.getBoundingClientRect();
+      const h1 = document.querySelector('.bar h1')!.getBoundingClientRect();
+      return { h1Top: Math.round(h1.top), overflows: h1.bottom > bar.bottom + 0.5 };
+    });
+
+  const normal = await probe();
+  // Scale the root font up (an OS / Telegram "larger text" setting scales rem-based text).
+  await page.evaluate(() => (document.documentElement.style.fontSize = '28px'));
+  const large = await probe();
+
+  // The gap to Telegram's native controls is a fixed px, so the title's top does not move…
+  expect(large.h1Top).toBe(normal.h1Top);
+  // …the title grows downward inside the bar (which grows with it), never overflowing it.
+  expect(normal.overflows).toBe(false);
+  expect(large.overflows).toBe(false);
+});
+
 test('outside Telegram, the /telegram/ entry redirects to the site root', async ({ page }) => {
   await page.goto('/telegram/');
 

ui/src/components/Header.svelte

@@ -109,12 +109,14 @@
        back chevron is hidden), so min-height (the nav-band height) doesn't bind. Without the
        (removed) hamburger that content shrank and the bar sat flush under Telegram's native nav
        band. So **padding-top** is the lever: it drops the title clear of the band — the notch
-       plus a **+20px** gap (was +6). (Owner-tunable: bump the +20px.) */
+       plus a **10px** gap (was 6). A fixed px (not rem/em) gap so the clearance from Telegram's
+       native controls stays constant if the user scales up the font (the title then grows
+       downward and the bar with it). (Owner-tunable: the 10px.) */
     min-height: var(--tg-content-top);
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
-    padding-top: calc(var(--tg-safe-top) + 26px);
+    padding-top: calc(var(--tg-safe-top) + 16px);
     padding-bottom: 6px;
   }
   :global(html.tg-fullscreen) .spacer {