From e6b692fc5df25ca4ae25f625d0343708db958b1d Mon Sep 17 00:00:00 2001
From: liu weikai <vicliu@outlook.com>
Date: Sat, 17 Oct 2026 08:47:48 +0800
Subject: [PATCH] fix(web): prevent mobile outline labels from overlapping

---
 site/index.html                   |  2 +-
 site/site-header.css              | 13 ++++++++-----
 tests/site/navigation.browser.mjs | 10 ++++++++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/site/index.html b/site/index.html
index 314b0f71..41857fa1 100644
--- a/site/index.html
+++ b/site/index.html
@@ -17,8 +17,8 @@
     <link rel="icon" type="image/png" href="./assets/showcase/brand-logo.png">
     <link rel="stylesheet" href="./components-dist/components.css">
     <link rel="stylesheet" href="./styles.css?v=language-picker-2">
-    <link rel="stylesheet" href="./site-header.css">
     <link rel="stylesheet" href="./explorer.css?v=reading-surfaces-5">
+    <link rel="stylesheet" href="./site-header.css">
     <script
       type="module"
       src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"
diff --git a/site/site-header.css b/site/site-header.css
index 6bb63ef3..05e9674a 100644
--- a/site/site-header.css
+++ b/site/site-header.css
@@ -38,6 +38,7 @@
 .web-tool-card strong{font-size:19px;color:#794f27}
 .web-tool-card p{margin:0;font-size:14px;line-height:1.6}
 .web-tool-card>span:last-child{margin-top:auto;padding-top:10px;color:#0b756a;font-weight:800;font-size:13px}
+.sidebar .side-nav>a{min-width:0;overflow-wrap:anywhere;white-space:normal}
 @media(max-width:1100px){
  .site-header-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
  .site-primary{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px dashed #d4c9b4;padding-top:10px}
@@ -56,14 +57,16 @@
  .site-header .language-toggle .animal-select{min-width:110px}
  .web-tool-grid{grid-template-columns:1fr}
  .web-tool-card{padding:18px}
- .page-shell>.content-shell>.sidebar:has(.side-nav){padding:12px;max-height:none}
- .sidebar:has(.side-nav)>.sidebar-label{display:none}
- .sidebar .side-nav{display:flex;flex-wrap:wrap;gap:4px}
- .sidebar .side-nav>.navigation-icon{display:none}
- .sidebar .side-nav>a{min-height:32px;padding:6px 9px;font-size:12px;line-height:1.3}
  .site-page-actions{justify-content:space-between}
  #geocaching-app>.site-header{margin:10px 10px 12px}
  #geocaching-app{height:auto;min-height:100dvh}
  #geocaching-app>.workspace{height:auto;grid-template-rows:360px minmax(360px,auto);min-height:0;flex:auto}
 }
+@media(max-width:1000px){
+ .page-shell>.content-shell>.sidebar:has(.side-nav){padding:12px;max-height:none}
+ .sidebar:has(.side-nav)>.sidebar-label{display:none}
+ .sidebar .side-nav{display:flex;flex-wrap:wrap;gap:4px}
+ .sidebar .side-nav>.navigation-icon{display:none}
+ .sidebar .side-nav>a{width:auto;flex:0 1 auto;min-height:32px;padding:6px 9px;font-size:12px;line-height:1.3}
+}
 @media(prefers-reduced-motion:reduce){.web-tool-card{transition:none}}
diff --git a/tests/site/navigation.browser.mjs b/tests/site/navigation.browser.mjs
index 6a494ac0..05dccb23 100644
--- a/tests/site/navigation.browser.mjs
+++ b/tests/site/navigation.browser.mjs
@@ -55,6 +55,16 @@ async function inspect(current,locale){
     const r=element.getBoundingClientRect();return r.left>=box.left&&r.right<=box.right&&r.width>0;
    });
   }),`${current}/${locale}: header must fit at ${width}px`);
+  if(current==='home')assert.ok(await page.locator('.side-nav').evaluate(nav=>{
+   const links=[...nav.querySelectorAll('a')];
+   return links.every((link,index)=>{
+    const box=link.getBoundingClientRect(),range=document.createRange();range.selectNodeContents(link);
+    const text=range.getBoundingClientRect();
+    return text.left>=box.left&&text.right<=box.right&&links.slice(index+1).every(other=>{
+     const b=other.getBoundingClientRect();return box.right<=b.left||b.right<=box.left||box.bottom<=b.top||b.bottom<=box.top;
+    });
+   });
+  }),`homepage outline text/links must not overlap: ${locale}/${width}`);
  }
  await page.setViewportSize({width:1440,height:1080});
  checks.push({page:current,locale,widths:[1440,1024,768,390,320]});