From d5f324915556c4659c5932f44c68f5241b1c87a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bryd=C3=B8y=20Savland?= <erik.savland@gmail.com>
Date: Fri, 23 Oct 2026 15:18:10 +0200
Subject: [PATCH 1/4] feat: improve responsive navigation and venue details

---
 client/src/App.css                            | 207 ++++++++++++++++--
 client/src/components/FeaturedPlace.tsx       |  17 +-
 client/src/components/MainNav.tsx             |   5 +-
 client/src/components/MenuButton.tsx          |  15 +-
 client/src/components/PlaceList.tsx           |   1 +
 client/src/components/SiteHeader.tsx          |  43 +++-
 .../__snapshots__/SiteHeader.test.tsx.snap    |   5 +-
 client/src/pages/ChallengesPage.css           |   2 +-
 client/src/pages/HomePage.tsx                 | 103 ++++++---
 client/src/pages/MapPage.css                  |  12 +-
 client/src/pages/UserPage.css                 |   2 +-
 11 files changed, 346 insertions(+), 66 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 080f6ba..61ecc49 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -3,11 +3,13 @@
 .site-header {
   --header-end: #1b6a8c;
 
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 5;
   padding: 1.25rem 1rem 1.8rem;
   background: linear-gradient(var(--navy-900), #0f3d68 45%, var(--header-end));
   color: var(--eggshell);
+  transition: padding 0.35s ease;
 }
 
 .site-header :focus-visible {
@@ -29,6 +31,7 @@
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 8'%3E%3Cpath d='M0 4q12-8 24 0t24 0 24 0 24 0V0H0Z'/%3E%3C/svg%3E")
     repeat-x top / 6rem 0.5rem;
   animation: wave-drift 24s linear infinite;
+  transition: height 0.35s ease;
 }
 
 /* Bølgen glir sidelengs. Den ene bølgelengden er 6rem, så løkken er sømløs. */
@@ -46,8 +49,17 @@
 
 /* Sidemargen holder tittelen unna hjørneknappene. */
 .site-title {
+  max-height: 8rem;
+  overflow: hidden;
   padding-inline: 3.25rem;
+  pointer-events: none;
   text-align: center;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    max-height 0.35s ease,
+    opacity 0.2s ease,
+    transform 0.35s ease;
 }
 
 /* Tittelen har fast høyde og én linje, så toppen er like høy på alle sider. */
@@ -58,7 +70,7 @@
   gap: 0.6rem;
   height: 1.4em;
   margin: 0;
-  font-size: clamp(2rem, 5vw, 2.85rem);
+  font-size: 2.5rem;
   line-height: 1.4;
 }
 
@@ -95,13 +107,13 @@
   gap: 0.6rem;
   margin: 0.4rem 0 0;
   color: var(--blue-100);
-  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
+  font-size: 1.1rem;
 }
 
 .site-title p::before,
 .site-title p::after {
   content: '';
-  width: clamp(0.75rem, 5vw, 2.5rem);
+  width: 1.5rem;
   height: 1px;
   background: var(--blue-300);
   opacity: 0.7;
@@ -145,6 +157,7 @@
   display: grid;
   position: absolute;
   top: 0.5rem;
+  z-index: 2;
   place-items: center;
   width: 2.75rem;
   height: 2.75rem;
@@ -166,6 +179,10 @@
   left: 0.5rem;
 }
 
+.menu-button {
+  display: none;
+}
+
 .help-button {
   right: 0.5rem;
 }
@@ -242,7 +259,7 @@
 .map-control:hover:not(:disabled) {
   background: var(--navy-900);
   color: var(--eggshell);
-  transform: translateY(-2px);
+  transform: translateY(-0.125rem);
   box-shadow: 0 0.35rem 0.75rem rgb(10 34 64 / 0.25);
 }
 
@@ -270,12 +287,13 @@
 
 .main-nav ul {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
-  gap: 0.4rem;
-  max-width: 44rem;
-  margin: 0.85rem auto 0;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.5rem;
+  max-width: 48rem;
+  margin: 1rem auto 0;
   padding: 0;
   list-style: none;
+  transition: margin 0.35s ease;
 }
 
 .main-nav a {
@@ -283,11 +301,12 @@
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
-  padding: 0.3rem 0.55rem;
+  min-height: 2.75rem;
+  padding: 0.45rem 0.6rem;
   border-radius: 0.5rem;
   background: rgb(10 34 64 / 0.6);
   color: var(--eggshell);
-  font-size: 0.85rem;
+  font-size: 0.9rem;
   font-weight: 600;
   text-decoration: none;
   transition:
@@ -305,7 +324,7 @@
 .main-nav a:hover {
   background: var(--blue-300);
   color: var(--navy-900);
-  transform: translateY(-2px);
+  transform: translateY(-0.125rem);
 }
 
 /* Siden vi står på: lys «dekk»-markering. */
@@ -439,10 +458,11 @@
 @media (min-width: 56rem) {
   .featured {
     position: sticky;
-    top: 1rem;
+    /* Keep the card below the compact sticky navigation bar. */
+    top: 4.25rem;
     /* Bildet får all ledig plass, men aldri mindre enn dette. */
     grid-template-rows: auto minmax(max(9rem, 24vh), 1fr) auto auto auto auto;
-    height: calc(100vh - 2rem);
+    height: calc(100vh - 5.25rem);
     /* Boksen skrumpes aldri: i lave vinduer er den like høy som innholdet. */
     min-height: min-content;
   }
@@ -479,7 +499,7 @@
 .button:hover:not(:disabled) {
   background: var(--blue-300);
   color: var(--navy-900);
-  transform: translateY(-2px);
+  transform: translateY(-0.125rem);
   box-shadow: 0 0.35rem 0.75rem rgb(10 34 64 / 0.2);
 }
 
@@ -706,7 +726,7 @@
 .suggestion:hover {
   border-color: var(--navy-500);
   box-shadow: 0 0.5rem 1rem rgb(10 34 64 / 0.15);
-  transform: translateY(-2px);
+  transform: translateY(-0.125rem);
 }
 
 .suggestion:active {
@@ -741,12 +761,6 @@
   color: var(--muted);
 }
 
-@media (max-width: 30rem) {
-  .suggestion {
-    grid-template-columns: minmax(0, 1fr) 6rem;
-  }
-}
-
 /* Markerer stedet som vises som fremhevet. */
 .suggestion-active,
 .suggestion-active:hover {
@@ -826,3 +840,152 @@ main {
   font-size: 0.75rem;
   font-style: normal;
 }
+
+/* Compact sticky bar after the reader has moved past the page title. */
+.site-header-compact {
+  background: var(--navy-900);
+  padding-block: 0.35rem 0.65rem;
+}
+
+.site-header-compact::after {
+  content: none;
+  display: none;
+}
+
+.site-header-compact .site-title {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-0.75rem);
+}
+
+.site-header-compact .main-nav ul {
+  margin-block-start: 0;
+}
+
+.site-header-compact .gulls {
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    visibility 0s linear 0.2s;
+}
+
+.site-header-compact .help-button {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+/* Felles mobiloppsett: færre trange rader og navigasjon i sticky header. */
+@media (max-width: 56rem) {
+  .site-header {
+    padding: 0.75rem 0.75rem 1rem;
+  }
+
+  .site-title {
+    padding-inline: 3rem;
+  }
+
+  .site-title h1 {
+    height: auto;
+    min-height: 2.75rem;
+    font-size: 2rem;
+  }
+
+  .site-title p {
+    font-size: 1rem;
+  }
+
+  .menu-button {
+    display: grid;
+  }
+
+  .site-header-compact {
+    min-height: 3.5rem;
+    padding-block: 0.35rem 0.55rem;
+  }
+
+  .site-header-compact .menu-button {
+    top: 0.35rem;
+  }
+
+  .main-nav {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0.75rem;
+    left: 0.75rem;
+    z-index: 1;
+    padding: 0.75rem;
+    border: 1px solid var(--blue-300);
+    border-radius: 0 0 0.75rem 0.75rem;
+    background: var(--navy-900);
+    box-shadow: 0 0.75rem 1.5rem rgb(10 34 64 / 0.25);
+  }
+
+  .site-header.menu-open .main-nav {
+    display: block;
+  }
+
+  .main-nav ul {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.5rem;
+    margin: 0;
+  }
+
+  .main-nav a {
+    justify-content: flex-start;
+    min-height: 2.75rem;
+    padding: 0.65rem 0.75rem;
+    font-size: 1rem;
+  }
+
+  .help-popover {
+    inset-block-start: 3.5rem;
+  }
+
+  .page.mobile-detail {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .page.mobile-detail > .place-filter,
+  .page.mobile-detail > .suggestions {
+    display: none;
+  }
+
+  .featured-back {
+    justify-self: start;
+    width: auto;
+  }
+}
+
+@media (max-width: 40rem) {
+  .page {
+    gap: 1.5rem;
+    padding: 1.25rem 0.75rem 2rem;
+  }
+
+  .place-filter {
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .place-filter input,
+  .place-filter select,
+  .place-filter > .button {
+    min-height: 2.75rem;
+  }
+
+  .place-filter input {
+    flex-basis: 100%;
+  }
+
+  .suggestion {
+    grid-template-columns: minmax(0, 1fr) 7rem;
+    gap: 0.75rem;
+  }
+
+  .featured-actions {
+    gap: 0.5rem;
+  }
+}
diff --git a/client/src/components/FeaturedPlace.tsx b/client/src/components/FeaturedPlace.tsx
index 2401135..2e39607 100644
--- a/client/src/components/FeaturedPlace.tsx
+++ b/client/src/components/FeaturedPlace.tsx
@@ -7,6 +7,8 @@ type FeaturedPlaceProps = {
   now: Date
   onPrevious: () => void
   onNext: () => void
+  onBack?: () => void
+  showBack?: boolean
 }
 
 /** Lite kompass som lenker til stedets nettside. */
@@ -34,16 +36,29 @@ export function FeaturedPlace({
   now,
   onPrevious,
   onNext,
+  onBack,
+  showBack = false,
 }: FeaturedPlaceProps) {
   return (
     <article id="featured" className="featured" aria-labelledby="featured-name">
+      {showBack && onBack && (
+        <button
+          type="button"
+          className="button button-outline featured-back"
+          onClick={onBack}
+        >
+          Tilbake til listen
+        </button>
+      )}
       {/* Gir skjermlesere beskjed når stedet byttes. */}
       <p role="status" className="visually-hidden">
         Fremhevet sted: {place.name}
       </p>
 
       <header className="featured-header">
-        <h2 id="featured-name">{place.name}</h2>
+        <h2 id="featured-name" tabIndex={-1}>
+          {place.name}
+        </h2>
         {place.websiteUrl && (
           <a
             className="visit-link"
diff --git a/client/src/components/MainNav.tsx b/client/src/components/MainNav.tsx
index 3fd46ba..9c8b0c4 100644
--- a/client/src/components/MainNav.tsx
+++ b/client/src/components/MainNav.tsx
@@ -97,17 +97,18 @@ const links: {
   },
 ]
 
-export function MainNav() {
+export function MainNav({ onNavigate }: { onNavigate?: () => void }) {
   const current = useRoute()
 
   return (
-    <nav className="main-nav" aria-label="Hovednavigasjon">
+    <nav id="main-navigation" className="main-nav" aria-label="Hovednavigasjon">
       <ul>
         {links.map(({ label, icon, href, route }) => (
           <li key={label}>
             <a
               href={href ?? '#'}
               aria-current={route === current ? 'page' : undefined}
+              onClick={onNavigate}
             >
               {icon}
               {label}
diff --git a/client/src/components/MenuButton.tsx b/client/src/components/MenuButton.tsx
index f99f5f0..174425a 100644
--- a/client/src/components/MenuButton.tsx
+++ b/client/src/components/MenuButton.tsx
@@ -1,7 +1,16 @@
-/** Menyknappen øverst til venstre. Funksjonen kommer senere. */
-export function MenuButton() {
+type MenuButtonProps = { open: boolean; onClick: () => void }
+
+/** Mobilknapp som åpner eller lukker hovednavigasjonen. */
+export function MenuButton({ open, onClick }: MenuButtonProps) {
   return (
-    <button type="button" className="icon-button menu-button" aria-label="Meny">
+    <button
+      type="button"
+      className="icon-button menu-button"
+      aria-label={open ? 'Lukk meny' : 'Åpne meny'}
+      aria-expanded={open}
+      aria-controls="main-navigation"
+      onClick={onClick}
+    >
       <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
         <path
           d="M4 6h16M4 12h16M4 18h16"
diff --git a/client/src/components/PlaceList.tsx b/client/src/components/PlaceList.tsx
index 8aa3b97..46d29a1 100644
--- a/client/src/components/PlaceList.tsx
+++ b/client/src/components/PlaceList.tsx
@@ -41,6 +41,7 @@ export function PlaceList({
           <li key={place.id}>
             <button
               type="button"
+              id={`suggestion-${place.id}`}
               className={
                 place.id === featuredId
                   ? 'suggestion suggestion-active'
diff --git a/client/src/components/SiteHeader.tsx b/client/src/components/SiteHeader.tsx
index 47431a8..a3dc132 100644
--- a/client/src/components/SiteHeader.tsx
+++ b/client/src/components/SiteHeader.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
 import { Gulls } from './Gulls'
 import { HelpButton } from './HelpButton'
 import { MainNav } from './MainNav'
@@ -24,9 +24,44 @@ export function SiteHeader({
   helpTitle,
   children,
 }: SiteHeaderProps) {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [compact, setCompact] = useState(false)
+  const [detailCompact, setDetailCompact] = useState(false)
+
+  useEffect(() => {
+    const updateHeader = () =>
+      setCompact((wasCompact) => {
+        // Separate thresholds prevent the shrinking header from toggling
+        // repeatedly when its height changes near the transition point.
+        if (detailCompact) return true
+        return wasCompact ? window.scrollY > 24 : window.scrollY > 96
+      })
+    const updateDetail = (event: Event) => {
+      const customEvent = event as CustomEvent<boolean>
+      setDetailCompact(customEvent.detail)
+      if (customEvent.detail) setCompact(true)
+      else updateHeader()
+    }
+    updateHeader()
+    window.addEventListener('scroll', updateHeader, { passive: true })
+    window.addEventListener('mobile-detail-change', updateDetail)
+    return () => {
+      window.removeEventListener('scroll', updateHeader)
+      window.removeEventListener('mobile-detail-change', updateDetail)
+    }
+  }, [detailCompact])
+
   return (
-    <header className="site-header">
-      <MenuButton />
+    <header
+      className={[
+        'site-header',
+        menuOpen && 'menu-open',
+        compact && 'site-header-compact',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <MenuButton open={menuOpen} onClick={() => setMenuOpen((open) => !open)} />
 
       <HelpButton id={helpId} title={helpTitle}>
         {children}
@@ -42,7 +77,7 @@ export function SiteHeader({
         <p>{subtitle}</p>
       </hgroup>
 
-      <MainNav />
+      <MainNav onNavigate={() => setMenuOpen(false)} />
     </header>
   )
 }
diff --git a/client/src/components/__snapshots__/SiteHeader.test.tsx.snap b/client/src/components/__snapshots__/SiteHeader.test.tsx.snap
index 0948434..b8dc523 100644
--- a/client/src/components/__snapshots__/SiteHeader.test.tsx.snap
+++ b/client/src/components/__snapshots__/SiteHeader.test.tsx.snap
@@ -6,7 +6,9 @@ exports[`SiteHeader > matches the shared header structure 1`] = `
     class="site-header"
   >
     <button
-      aria-label="Meny"
+      aria-controls="main-navigation"
+      aria-expanded="false"
+      aria-label="Åpne meny"
       class="icon-button menu-button"
       type="button"
     >
@@ -94,6 +96,7 @@ exports[`SiteHeader > matches the shared header structure 1`] = `
     <nav
       aria-label="Hovednavigasjon"
       class="main-nav"
+      id="main-navigation"
     >
       <ul>
         <li>
diff --git a/client/src/pages/ChallengesPage.css b/client/src/pages/ChallengesPage.css
index 1bd1ff3..05da5a8 100644
--- a/client/src/pages/ChallengesPage.css
+++ b/client/src/pages/ChallengesPage.css
@@ -195,7 +195,7 @@
 
 .wheel-hub text {
   fill: var(--navy-900);
-  font-size: 6px;
+  font-size: 0.375rem;
   font-weight: 800;
   letter-spacing: 0.05em;
   pointer-events: none;
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index fe879ad..ff77801 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { fetchVenueTypes } from '../api/places'
 import { FeaturedPlace } from '../components/FeaturedPlace'
 import { PlaceFilter } from '../components/PlaceFilter'
@@ -14,6 +14,30 @@ import type { Place, PlaceQuery } from '../types/place'
 const SEARCH_DEBOUNCE_MS = 300
 
 export function HomePage() {
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(max-width: 56rem)').matches,
+  )
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false)
+  const listScrollPosition = useRef(0)
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') return
+    const query = window.matchMedia('(max-width: 56rem)')
+    const update = () => setIsMobile(query.matches)
+    update()
+    query.addEventListener('change', update)
+    return () => query.removeEventListener('change', update)
+  }, [])
+
+  useEffect(() => {
+    if (!isMobile) setMobileDetailOpen(false)
+  }, [isMobile])
+
+  useEffect(() => {
+    window.dispatchEvent(new CustomEvent('mobile-detail-change', { detail: isMobile && mobileDetailOpen }))
+  }, [isMobile, mobileDetailOpen])
+
   const now = useNow()
   const {
     search,
@@ -77,8 +101,34 @@ export function HomePage() {
     select(places[next])
   }
 
+  const selectPlace = (place: Place) => {
+    select(place)
+    if (isMobile) {
+      listScrollPosition.current = window.scrollY
+      setMobileDetailOpen(true)
+      // Match the compact header state reached by scrolling down the list.
+      window.scrollTo(0, 120)
+      window.requestAnimationFrame(() =>
+        document.getElementById('featured-name')?.focus(),
+      )
+    }
+  }
+
+  const returnToList = () => {
+    setMobileDetailOpen(false)
+    window.requestAnimationFrame(() => {
+      window.scrollTo(0, listScrollPosition.current)
+      if (selected) {
+        document.getElementById(`suggestion-${selected.id}`)?.focus()
+      }
+    })
+  }
+
+  const isMobileDetail = isMobile && mobileDetailOpen
+  const showFeatured = !isMobile || isMobileDetail
+
   return (
-    <main className="page">
+    <main className={isMobileDetail ? 'page mobile-detail' : 'page'}>
       <PlaceFilter
         query={search}
         filters={types}
@@ -101,29 +151,32 @@ export function HomePage() {
         <p role="alert">Kunne ikke hente steder. Prøv å laste siden på nytt.</p>
       )}
 
-      {featured && (
-        <>
-          <FeaturedPlace
-            place={featured}
-            now={now}
-            onPrevious={() => step(-1)}
-            onNext={() => step(1)}
-          />
-          <PlaceList
-            places={places}
-            now={now}
-            featuredId={featured.id}
-            loadedCount={places.length}
-            totalCount={totalCount}
-            isFiltered={isFiltered}
-            hasMore={hasMore}
-            canShowLess={canShowLess}
-            isLoadingMore={status === 'loadingMore'}
-            onSelect={select}
-            onLoadMore={loadMore}
-            onShowLess={showLess}
-          />
-        </>
+      {featured && showFeatured && (
+        <FeaturedPlace
+          place={featured}
+          now={now}
+          onPrevious={() => step(-1)}
+          onNext={() => step(1)}
+          onBack={returnToList}
+          showBack={isMobileDetail}
+        />
+      )}
+
+      {places.length > 0 && (
+        <PlaceList
+          places={places}
+          now={now}
+          featuredId={featured?.id ?? ''}
+          loadedCount={places.length}
+          totalCount={totalCount}
+          isFiltered={isFiltered}
+          hasMore={hasMore}
+          canShowLess={canShowLess}
+          isLoadingMore={status === 'loadingMore'}
+          onSelect={selectPlace}
+          onLoadMore={loadMore}
+          onShowLess={showLess}
+        />
       )}
     </main>
   )
diff --git a/client/src/pages/MapPage.css b/client/src/pages/MapPage.css
index b24a911..6185922 100644
--- a/client/src/pages/MapPage.css
+++ b/client/src/pages/MapPage.css
@@ -75,22 +75,22 @@
 .map-pin-shape {
   position: absolute;
   top: 0;
-  left: 2px;
+  left: 0.125rem;
   display: grid;
-  width: 28px;
-  height: 28px;
+  width: 1.75rem;
+  height: 1.75rem;
   place-items: center;
   border: 2.5px solid var(--surface);
   border-radius: 50% 50% 50% 0;
   background: var(--navy-700);
-  box-shadow: 0 2px 6px rgb(10 34 64 / 0.35);
+  box-shadow: 0 0.125rem 0.375rem rgb(10 34 64 / 0.35);
   transform: rotate(-45deg);
   transition: background 0.15s;
 }
 
 .map-pin-mark {
   color: var(--surface);
-  font-size: 15px;
+  font-size: 0.95rem;
   font-weight: 700;
   line-height: 1;
   transform: rotate(45deg);
@@ -337,7 +337,7 @@
 
 @media (min-width: 56rem) {
   .map-page {
-    --sheet-height: 0px;
+    --sheet-height: 0rem;
   }
 
   .map-panel {
diff --git a/client/src/pages/UserPage.css b/client/src/pages/UserPage.css
index ce0c7eb..3ccbd9b 100644
--- a/client/src/pages/UserPage.css
+++ b/client/src/pages/UserPage.css
@@ -114,7 +114,7 @@
   }
 }
 
-@media (min-width: 72rem) {
+@media (min-width: 56rem) {
   .scroll-list {
     grid-auto-columns: calc((100% - 3rem) / 4);
   }

From 1d04ee3c6bce3e58857b4e42b9140b2b9c1ecca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bryd=C3=B8y=20Savland?= <erik.savland@gmail.com>
Date: Fri, 23 Oct 2026 15:35:33 +0200
Subject: [PATCH 2/4] fix: reset compact header when navigating away

---
 client/src/App.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 188d8f8..24387b0 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -23,6 +23,8 @@ function App() {
 
   // Hver side starter øverst, ikke der forrige side var rullet til.
   useEffect(() => {
+    // Clear mobile venue-detail header state when navigating to another page.
+    window.dispatchEvent(new CustomEvent('mobile-detail-change', { detail: false }))
     window.scrollTo(0, 0)
   }, [route])
 

From 2906519a7daaccbb8ebe6badf1eb11b626ddf9ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bryd=C3=B8y=20Savland?= <erik.savland@gmail.com>
Date: Fri, 23 Oct 2026 16:01:30 +0200
Subject: [PATCH 3/4] style: format frontend files

---
 client/src/App.tsx                   |  4 +++-
 client/src/components/SiteHeader.tsx |  5 ++++-
 client/src/pages/HomePage.tsx        | 13 +++++++++----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 24387b0..6d7f77f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -24,7 +24,9 @@ function App() {
   // Hver side starter øverst, ikke der forrige side var rullet til.
   useEffect(() => {
     // Clear mobile venue-detail header state when navigating to another page.
-    window.dispatchEvent(new CustomEvent('mobile-detail-change', { detail: false }))
+    window.dispatchEvent(
+      new CustomEvent('mobile-detail-change', { detail: false }),
+    )
     window.scrollTo(0, 0)
   }, [route])
 
diff --git a/client/src/components/SiteHeader.tsx b/client/src/components/SiteHeader.tsx
index a3dc132..5538539 100644
--- a/client/src/components/SiteHeader.tsx
+++ b/client/src/components/SiteHeader.tsx
@@ -61,7 +61,10 @@ export function SiteHeader({
         .filter(Boolean)
         .join(' ')}
     >
-      <MenuButton open={menuOpen} onClick={() => setMenuOpen((open) => !open)} />
+      <MenuButton
+        open={menuOpen}
+        onClick={() => setMenuOpen((open) => !open)}
+      />
 
       <HelpButton id={helpId} title={helpTitle}>
         {children}
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index ff77801..d2d99d8 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -14,9 +14,10 @@ import type { Place, PlaceQuery } from '../types/place'
 const SEARCH_DEBOUNCE_MS = 300
 
 export function HomePage() {
-  const [isMobile, setIsMobile] = useState(() =>
-    typeof window.matchMedia === 'function' &&
-    window.matchMedia('(max-width: 56rem)').matches,
+  const [isMobile, setIsMobile] = useState(
+    () =>
+      typeof window.matchMedia === 'function' &&
+      window.matchMedia('(max-width: 56rem)').matches,
   )
   const [mobileDetailOpen, setMobileDetailOpen] = useState(false)
   const listScrollPosition = useRef(0)
@@ -35,7 +36,11 @@ export function HomePage() {
   }, [isMobile])
 
   useEffect(() => {
-    window.dispatchEvent(new CustomEvent('mobile-detail-change', { detail: isMobile && mobileDetailOpen }))
+    window.dispatchEvent(
+      new CustomEvent('mobile-detail-change', {
+        detail: isMobile && mobileDetailOpen,
+      }),
+    )
   }, [isMobile, mobileDetailOpen])
 
   const now = useNow()

From 6f067d0cc697b3bfe436c18a128644bd8ebd2483 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bryd=C3=B8y=20Savland?= <erik.savland@gmail.com>
Date: Fri, 23 Oct 2026 19:00:20 +0200
Subject: [PATCH 4/4] fix: keep mobile menu clear of keyboard navigation

---
 client/src/App.css                | 10 ++++++----
 client/src/components/MainNav.tsx | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 61ecc49..a471065 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -912,15 +912,17 @@ main {
   .main-nav {
     display: none;
     position: absolute;
-    top: 100%;
-    right: 0.75rem;
-    left: 0.75rem;
+    top: 0.35rem;
+    left: 3.5rem;
     z-index: 1;
+    width: min(18rem, calc(100vw - 7rem));
+    max-height: calc(100dvh - 0.7rem);
     padding: 0.75rem;
     border: 1px solid var(--blue-300);
-    border-radius: 0 0 0.75rem 0.75rem;
+    border-radius: 0.75rem;
     background: var(--navy-900);
     box-shadow: 0 0.75rem 1.5rem rgb(10 34 64 / 0.25);
+    overflow-y: auto;
   }
 
   .site-header.menu-open .main-nav {
diff --git a/client/src/components/MainNav.tsx b/client/src/components/MainNav.tsx
index 9c8b0c4..7e3fb11 100644
--- a/client/src/components/MainNav.tsx
+++ b/client/src/components/MainNav.tsx
@@ -101,7 +101,20 @@ export function MainNav({ onNavigate }: { onNavigate?: () => void }) {
   const current = useRoute()
 
   return (
-    <nav id="main-navigation" className="main-nav" aria-label="Hovednavigasjon">
+    <nav
+      id="main-navigation"
+      className="main-nav"
+      aria-label="Hovednavigasjon"
+      onBlur={(event) => {
+        const nextTarget = event.relatedTarget
+        if (
+          !(nextTarget instanceof Node) ||
+          !event.currentTarget.contains(nextTarget)
+        ) {
+          onNavigate?.()
+        }
+      }}
+    >
       <ul>
         {links.map(({ label, icon, href, route }) => (
           <li key={label}>