From 8a1cf7b2b651a6b4b53f2d93b8289c4fe25bb78f Mon Sep 17 00:00:00 2001
From: Christian Manivong <christian.manivong@gmail.com>
Date: Sat, 26 Sep 2026 10:52:13 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20usable=20on=20phones=20=E2=80=94=20menu,?=
 =?UTF-8?q?=20no=20sideways=20scrolling,=20whole=20roadmap=20intro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The navigation had no mobile layout: every page was 413px wider than a
  phone. Below lg the links now sit behind a menu button, grouped like the
  desktop dropdowns; the menu closes on navigation.
- Glossary tooltips were invisible but still laid out, so a term near the
  right edge widened the page. Hidden tooltips no longer take up space;
  they show on hover and on keyboard focus as before.
- Long German words in page headings ("produktionstauglich",
  "Konfigurationstiefe") overflowed at 360px; headings start a size smaller
  on phones.
- The roadmap intro dropped everything after its second "NIS2" ("…the
  baseline requirements of"); it is split at the first one only now.

Checked at 360, 390 and 768px on every page: no horizontal overflow.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/GlossaryMark.tsx |  3 +-
 src/components/Nav.tsx          | 51 +++++++++++++++++++++++++++++++--
 src/pages/ForItDepartment.tsx   |  2 +-
 src/pages/ForItSupport.tsx      |  2 +-
 src/pages/ForMsp.tsx            |  2 +-
 src/pages/GettingStarted.tsx    |  2 +-
 src/pages/Roadmap.tsx           |  4 +--
 7 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/components/GlossaryMark.tsx b/src/components/GlossaryMark.tsx
index 5670854..797dec8 100644
--- a/src/components/GlossaryMark.tsx
+++ b/src/components/GlossaryMark.tsx
@@ -48,10 +48,11 @@ export default function GlossaryMark({ id, children }: { id: string; children: R
       className="group relative border-b border-dotted border-sky-500/60 hover:border-sky-400 hover:text-sky-300 transition-colors"
     >
       {children}
+      {/* display:none while hidden: an invisible box would still widen the page on phones */}
       <span
         className={`pointer-events-none absolute bottom-full z-20 mb-2 w-64 rounded-lg
                    border border-slate-700 bg-slate-900 p-3 text-left text-xs font-normal normal-case
-                   text-slate-400 opacity-0 shadow-2xl transition-opacity group-hover:opacity-100
+                   text-slate-400 shadow-2xl hidden group-hover:block group-focus-visible:block
                    ${PLACEMENT_CLASS[placement]}`}
       >
         <span className="mb-1 block font-semibold text-slate-200">{name}</span>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 1fec9d6..890b5ee 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,12 +1,16 @@
 import { useState, useRef, useEffect, type ReactNode } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { ChevronDownIcon } from '@heroicons/react/24/outline'
+import { Bars3Icon, ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { useLang } from '../context/LangContext'
 import type { Lang } from '../i18n/translations'
 
 const dropdownItemCls =
   'block px-4 py-2 text-sm text-slate-400 hover:text-slate-100 hover:bg-slate-800 transition-colors'
 
+const mobileItemCls =
+  'block rounded-lg px-3 py-2 text-sm text-slate-300 hover:text-slate-100 hover:bg-slate-800 transition-colors'
+const mobileHeadingCls = 'px-3 pt-4 pb-1 text-xs font-semibold uppercase tracking-widest text-slate-500'
+
 function NavDropdown({
   label,
   active,
@@ -57,6 +61,11 @@ function NavDropdown({
 export default function Nav() {
   const location = useLocation()
   const { lang, setLang, t } = useLang()
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  useEffect(() => {
+    setMenuOpen(false)
+  }, [location.pathname])
 
   const linkCls = (path: string) =>
     `text-sm transition-colors ${
@@ -71,7 +80,7 @@ export default function Nav() {
 
   return (
     <nav className="sticky top-0 z-10 bg-slate-900/80 backdrop-blur border-b border-slate-800">
-      <div className="max-w-7xl mx-auto px-6 h-14 flex items-center gap-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 h-14 flex items-center gap-8">
         <Link to="/" className="flex items-center gap-2.5 mr-2">
           <img src="/logo.png" alt="" className="h-7 w-7" aria-hidden="true" />
           <span className="font-semibold text-slate-100 tracking-tight">
@@ -79,6 +88,7 @@ export default function Nav() {
           </span>
         </Link>
 
+        <div className="hidden lg:flex items-center gap-8">
         <Link to="/features" className={linkCls('/features')}>
           {t.nav.features}
         </Link>
@@ -126,17 +136,52 @@ export default function Nav() {
         <Link to="/roadmap" className={linkCls('/roadmap')}>
           {t.nav.roadmap}
         </Link>
+        </div>
 
         <div className="ml-auto flex items-center gap-4">
           <LangSwitch lang={lang} setLang={setLang} />
           <Link
             to="/docs/getting-started"
-            className="inline-flex items-center gap-2 px-4 py-1.5 text-sm rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-medium transition-colors"
+            className="hidden sm:inline-flex items-center gap-2 px-4 py-1.5 text-sm rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-medium transition-colors"
           >
             {t.nav.getStarted}
           </Link>
+          <button
+            onClick={() => setMenuOpen((v) => !v)}
+            aria-expanded={menuOpen}
+            aria-label="Menu"
+            className="lg:hidden -mr-1 p-1 text-slate-400 hover:text-slate-100 transition-colors"
+          >
+            {menuOpen ? <XMarkIcon className="h-6 w-6" /> : <Bars3Icon className="h-6 w-6" />}
+          </button>
         </div>
       </div>
+
+      {menuOpen && (
+        <div className="lg:hidden border-t border-slate-800 bg-slate-900 max-h-[calc(100vh-3.5rem)] overflow-y-auto">
+          <div className="px-4 py-3">
+            <Link to="/features" className={mobileItemCls}>{t.nav.features}</Link>
+            <Link to="/drivers" className={mobileItemCls}>{t.nav.drivers}</Link>
+            <Link to="/plugins" className={mobileItemCls}>{t.nav.plugins}</Link>
+            <Link to="/roadmap" className={mobileItemCls}>{t.nav.roadmap}</Link>
+            <p className={mobileHeadingCls}>{t.nav.docs}</p>
+            <Link to="/docs/getting-started" className={mobileItemCls}>{t.nav.docsItems.gettingStarted}</Link>
+            <Link to="/docs/architecture" className={mobileItemCls}>{t.nav.docsItems.architecture}</Link>
+            <Link to="/nis2" className={mobileItemCls}>{t.nav.docsItems.nis2}</Link>
+            <Link to="/glossary" className={mobileItemCls}>{t.nav.docsItems.glossary}</Link>
+            <p className={mobileHeadingCls}>{t.nav.forWhom}</p>
+            <Link to="/for/it-department" className={mobileItemCls}>{t.nav.forItems.itDepartment}</Link>
+            <Link to="/for/it-support" className={mobileItemCls}>{t.nav.forItems.itSupport}</Link>
+            <Link to="/for/msp" className={mobileItemCls}>{t.nav.forItems.msp}</Link>
+            <Link
+              to="/docs/getting-started"
+              className="sm:hidden mt-4 flex justify-center px-4 py-2 text-sm rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-medium transition-colors"
+            >
+              {t.nav.getStarted}
+            </Link>
+          </div>
+        </div>
+      )}
     </nav>
   )
 }
diff --git a/src/pages/ForItDepartment.tsx b/src/pages/ForItDepartment.tsx
index c49b943..12f0279 100644
--- a/src/pages/ForItDepartment.tsx
+++ b/src/pages/ForItDepartment.tsx
@@ -62,7 +62,7 @@ export default function ForItDepartment() {
           <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-sky-600/10">
             <ServerStackIcon className="h-5 w-5 text-sky-400" />
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forItDepartment.heading}</h1>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forItDepartment.heading}</h1>
           <p className="text-base text-slate-400 leading-relaxed max-w-2xl">{linkify(t.forItDepartment.sub)}</p>
         </div>
 
diff --git a/src/pages/ForItSupport.tsx b/src/pages/ForItSupport.tsx
index 6a00afa..8ee7268 100644
--- a/src/pages/ForItSupport.tsx
+++ b/src/pages/ForItSupport.tsx
@@ -62,7 +62,7 @@ export default function ForItSupport() {
           <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-sky-600/10">
             <LifebuoyIcon className="h-5 w-5 text-sky-400" />
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forItSupport.heading}</h1>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forItSupport.heading}</h1>
           <p className="text-base text-slate-400 leading-relaxed max-w-2xl">{linkify(t.forItSupport.sub)}</p>
         </div>
 
diff --git a/src/pages/ForMsp.tsx b/src/pages/ForMsp.tsx
index 2697e3f..22082bd 100644
--- a/src/pages/ForMsp.tsx
+++ b/src/pages/ForMsp.tsx
@@ -62,7 +62,7 @@ export default function ForMsp() {
           <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-sky-600/10">
             <BuildingOffice2Icon className="h-5 w-5 text-sky-400" />
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forMsp.heading}</h1>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forMsp.heading}</h1>
           <p className="text-base text-slate-400 leading-relaxed max-w-2xl">{linkify(t.forMsp.sub)}</p>
         </div>
 
diff --git a/src/pages/GettingStarted.tsx b/src/pages/GettingStarted.tsx
index 5382270..324958d 100644
--- a/src/pages/GettingStarted.tsx
+++ b/src/pages/GettingStarted.tsx
@@ -9,7 +9,7 @@ export default function GettingStarted() {
     <div className="py-24 md:py-40">
       <div className="max-w-2xl mx-auto px-6 text-center">
         <p className="text-sm font-medium text-sky-400 mb-4 font-mono">{t.gettingStarted.label}</p>
-        <h1 className="text-4xl md:text-5xl font-bold text-slate-100 leading-tight mb-6 whitespace-pre-line">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-slate-100 leading-tight mb-6 whitespace-pre-line">
           {t.gettingStarted.heading}
         </h1>
         <p className="text-base text-slate-400 leading-relaxed mb-10">
diff --git a/src/pages/Roadmap.tsx b/src/pages/Roadmap.tsx
index 5193b44..c03d89b 100644
--- a/src/pages/Roadmap.tsx
+++ b/src/pages/Roadmap.tsx
@@ -187,9 +187,9 @@ export default function Roadmap() {
         <div className="mb-12">
           <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.roadmap.heading}</h1>
           <p className="text-base text-slate-400 leading-relaxed max-w-xl">
-            {t.roadmap.sub.split('NIS2')[0]}
+            {t.roadmap.sub.slice(0, t.roadmap.sub.indexOf('NIS2'))}
             <Nis2Badge />
-            {t.roadmap.sub.split('NIS2')[1]}
+            {t.roadmap.sub.slice(t.roadmap.sub.indexOf('NIS2') + 'NIS2'.length)}
           </p>
         </div>