fix(landing): cover compact header transition band

Author: 徐燕来

apps/landing-page/app/_components/header-enhancer.astro

@@ -195,7 +195,7 @@ const directAssets = {
     }
 
     // Hamburger menu toggle. Active only at narrow viewports (CSS hides
-    // the toggle button at ≥1100px). Click toggles `.is-open` on the
+    // the toggle button at ≥1367px). Click toggles `.is-open` on the
     // header; outside-click, Escape, and clicking any link inside the
     // menu close it again. Keeps `aria-expanded` in sync.
     const toggle = document.querySelector('[data-nav-toggle]');

apps/landing-page/app/_components/header.tsx

@@ -183,7 +183,7 @@ const COMMUNITY_ENTRY_COPY = {
 // the runtime via `data-*` on `.nav-account` because the auth logic lives in
 // `header-enhancer.astro`'s `<script is:inline>` (NOT processed by Vite, so it
 // cannot read `import.meta.env` itself).
-const env = import.meta.env as Record<string, string | undefined>;
+const env = (import.meta.env ?? {}) as Record<string, string | undefined>;
 const CLOUD_API_BASE =
   env.PUBLIC_CLOUD_API_BASE ?? env.PUBLIC_AMR_API_BASE ?? 'https://amr-api.open-design.ai';
 const CLOUD_CONSOLE_URL =
@@ -346,7 +346,7 @@ export function Header({
           />
         </a>
         {/*
-          Mobile / tablet hamburger. Hidden by CSS at ≥1100px (the desktop
+          Mobile / tablet hamburger. Hidden by CSS at ≥1367px (the desktop
           breakpoint where the full nav fits). At narrower widths it toggles
           `.is-open` on the parent <header> via a small handler in
           `header-enhancer.astro` — when open, the `<nav>` element below

apps/landing-page/app/globals.css

@@ -684,14 +684,14 @@ body::before {
   gap: 24px;
 }
 /*
- * Desktop bar layout (≥1081px, above the hamburger breakpoint): three
+ * Desktop bar layout (≥1367px, above the hamburger breakpoint): three
  * equal-flanked columns — brand logo pinned flush-left, the nav links
  * centred, and the action cluster (download / star / locale) flush-right.
  * The two 1fr side tracks are symmetric, which keeps the centre column
  * optically centred regardless of how wide either side gets. Mobile keeps
  * the base flex layout untouched.
  */
-@media (min-width: 1081px) {
+@media (min-width: 1367px) {
   .nav-inner {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
@@ -716,13 +716,6 @@ body::before {
     white-space: nowrap;
   }
 }
-/* Mid-band desktop (hamburger ends at 1081px): the longest locales need
- * tighter link spacing to hold a single row. The hover bridge width must
- * track the gap so sweeping between triggers keeps a dropdown open. */
-@media (min-width: 1081px) and (max-width: 1366px) {
-  .nav-links { gap: 22px; }
-  .nav-links li.has-dropdown:not(:last-child)::after { width: 22px; }
-}
 .brand {
   display: inline-flex;
   align-items: center;
@@ -917,7 +910,7 @@ body::before {
  * hides the frost behind itself, so the bar still reads as a clean bar.
  * Desktop only: the mobile nav is a vertical drawer, not a hover panel.
  */
-@media (min-width: 1081px) {
+@media (min-width: 1367px) {
   .site-chrome::after {
     content: '';
     position: absolute;
@@ -1028,7 +1021,7 @@ body::before {
    where a centering transform would shift them sideways. The Product li goes
    static so the wide panel positions against `.container` and centers on it —
    anchored to the li it overflows narrow desktops. */
-@media (min-width: 1081px) {
+@media (min-width: 1367px) {
   .nav-links li.nav-item-mega { position: static; }
   /* With the li static, absolutely-positioned descendants resolve against
      `.container` (the nearest positioned ancestor), so the shared
@@ -1116,7 +1109,7 @@ a.nav-mega-col-head.is-active {
 }
 
 /*
- * Hamburger toggle. Hidden at desktop widths (≥1080px). At narrower
+ * Hamburger toggle. Hidden at desktop widths (≥1367px). At narrower
  * viewports it replaces the inline nav-links and toggles a panel
  * underneath the header bar via a small handler in `header-enhancer`.
  */
@@ -5660,6 +5653,7 @@ footer .container {
 /* ---------- responsive ----------
  *
  * Breakpoint ladder:
+ *   1366  — crowded translated headers use the compact hamburger drawer.
  *   1280  — desktop chrome shrinks (drop side rails, slimmer container).
  *   1200  — topbar mid label crowds first, hide it.
  *   1080  — small desktop / large laptop. Smaller hero/section heads.
@@ -5679,25 +5673,22 @@ footer .container {
 @media (max-width: 1200px) {
   .topbar-inner .mid { display: none; }
 }
-/* nav: between 1080 and 1180 the brand tail + nav links + 2 CTAs + dot
- * crowd the row. Drop the brand sub-meta first, then tighten link spacing,
- * so the Star CTA never has to compress. */
-@media (max-width: 1180px) {
+/* The full translated navigation plus community, locale, Star, and Download
+ * actions does not fit safely in the condensed 1280px capsule. Keep a compact
+ * row through 1366px and resume the complete desktop header at 1367px. */
+@media (max-width: 1366px) {
   .nav-inner { gap: 18px; }
   .brand-meta { display: none; }
-  /* Link gap for this band already comes from the 1081–1366px rule next to
-     the desktop grid layout (22px — translated labels need the tighter
-     spacing); restating a larger gap here would override it. */
 }
 
-/* nav: at ≤1080px there's no clean way to fit Product · Skills · Systems ·
+/* nav: at ≤1366px there's no clean way to fit Product · Skills · Systems ·
  * Templates · Craft · Blog · Contact + Download + Star + dot in one row,
  * so swap to a hamburger panel. Star CTA stays visible in the bar (it's
  * the social-proof CTA); Download moves into the panel. The Product
  * submenu flattens from a hover-popup to an always-expanded inline list,
  * since hover doesn't translate to touch.
  */
-@media (max-width: 1080px) {
+@media (max-width: 1366px) {
   .nav-toggle { display: inline-flex; }
   .brand { white-space: nowrap; }
   /* Hide Download from the bar (Star stays). */
@@ -6021,7 +6012,7 @@ footer .container {
   .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
   .foot-bottom .right { flex-wrap: wrap; gap: 12px 20px; }
   /* nav — at ≤880px tighten padding; nav-links stay reachable through
-   * the hamburger panel introduced at ≤1080px. Brand meta and Download
+   * the hamburger panel introduced at ≤1366px. Brand meta and Download
    * stay hidden; Star CTA still pings in the bar. */
   .nav { padding: 16px 0; }
   .brand-meta { display: none; }

apps/landing-page/tests/header-community-entry.test.ts

@@ -1,13 +1,39 @@
 import assert from 'node:assert/strict';
-import { readFileSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { test } from 'node:test';
+import { chromium } from 'playwright';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { Header } from '../app/_components/header.tsx';
 
 const headerSource = readFileSync(
   new URL('../app/_components/header.tsx', import.meta.url),
   'utf8',
 );
 const stylesSource = readFileSync(new URL('../app/globals.css', import.meta.url), 'utf8');
 
+const ukrainianHeader = renderToStaticMarkup(
+  createElement(Header, {
+    counts: { skills: 100, systems: 10, templates: 20, craft: 5 },
+    github: { starsLabel: '83K+' },
+    locale: 'uk',
+    localeSwitcher: {
+      label: 'Змінити мову',
+      prefix: '',
+      shortLabel: 'UK',
+      options: [
+        {
+          code: 'uk',
+          href: '/uk/',
+          htmlLang: 'uk',
+          label: 'Українська',
+        },
+      ],
+    },
+  }),
+);
+
 test('community entry moves into the drawer without overflowing long localized labels', () => {
   assert.match(
     headerSource,
@@ -17,10 +43,78 @@ test('community entry moves into the drawer without overflowing long localized l
   assert.match(stylesSource, /\.nav-community-mobile-entry\s*\{\s*display:\s*none;/);
   assert.match(
     stylesSource,
-    /@media \(max-width: 1080px\)[\s\S]*?\.nav-side \.nav-community-entry\s*\{\s*display:\s*none;\s*\}[\s\S]*?\.nav-links \.nav-community-mobile-entry\s*\{[^}]*display:\s*grid;/,
+    /@media \(max-width: 1366px\)[\s\S]*?\.nav-side \.nav-community-entry\s*\{\s*display:\s*none;\s*\}[\s\S]*?\.nav-links \.nav-community-mobile-entry\s*\{[^}]*display:\s*grid;/,
   );
   assert.match(
     stylesSource,
     /\.nav-links \.nav-community-mobile-cta\s*\{[^}]*max-width:\s*100%;[^}]*white-space:\s*normal;[^}]*overflow-wrap:\s*anywhere;/s,
   );
 });
+
+test('longest-label community entry stays inside the rendered header at its boundary widths', async (t) => {
+  const localChrome = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
+  const browser = await chromium.launch({
+    headless: true,
+    ...(existsSync(localChrome) ? { executablePath: localChrome } : {}),
+  });
+  t.after(() => browser.close());
+
+  const context = await browser.newContext({ viewport: { width: 1081, height: 900 } });
+  const page = await context.newPage();
+  await page.setContent(
+    `<!doctype html><html lang="uk"><head><style>${stylesSource}</style></head><body><div class="site-chrome is-condensed">${ukrainianHeader}</div></body></html>`,
+  );
+
+  const readLayout = async (width: number) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.evaluate(`document.querySelector('header.nav').classList.add('is-open')`);
+    await page.waitForTimeout(250);
+    return page.evaluate(`(() => {
+      const nav = document.querySelector('header.nav');
+      const inner = document.querySelector('.nav-inner');
+      const toggle = document.querySelector('.nav-toggle');
+      const desktopEntry = document.querySelector('.nav-side .nav-community-entry');
+      const drawerEntry = document.querySelector('.nav-community-mobile-entry');
+      if (!nav || !inner || !toggle || !desktopEntry || !drawerEntry) {
+        throw new Error('header layout fixture is incomplete');
+      }
+
+      const isVisible = (element) => {
+        const style = getComputedStyle(element);
+        const rect = element.getBoundingClientRect();
+        return style.display !== 'none' && style.visibility !== 'hidden' && rect.width > 0;
+      };
+      const innerRect = inner.getBoundingClientRect();
+      const rowChildren = Array.from(inner.children).filter((element) => {
+        return isVisible(element) && getComputedStyle(element).position !== 'absolute';
+      });
+      const rowRects = rowChildren
+        .map((element) => element.getBoundingClientRect())
+        .sort((a, b) => a.left - b.left);
+      const rowFits =
+        rowRects.every((rect) => rect.left >= innerRect.left - 1 && rect.right <= innerRect.right + 1) &&
+        rowRects.every((rect, index) => index === 0 || rowRects[index - 1].right <= rect.left + 1);
+
+      return {
+        desktopEntryVisible: isVisible(desktopEntry),
+        drawerEntryText: drawerEntry.innerText,
+        drawerEntryVisible: isVisible(drawerEntry),
+        rowFits,
+        toggleVisible: isVisible(toggle),
+      };
+    })()`);
+  };
+
+  const compact = await readLayout(1081);
+  assert.equal(compact.toggleVisible, true);
+  assert.equal(compact.desktopEntryVisible, false);
+  assert.equal(compact.drawerEntryVisible, true);
+  assert.match(compact.drawerEntryText, /Приєднатися до Discord/);
+  assert.equal(compact.rowFits, true);
+
+  const desktop = await readLayout(1367);
+  assert.equal(desktop.toggleVisible, false);
+  assert.equal(desktop.desktopEntryVisible, true);
+  assert.equal(desktop.drawerEntryVisible, false);
+  assert.equal(desktop.rowFits, true);
+});