From 78edd658190e235d289309ee8f8a1fd67da727cd Mon Sep 17 00:00:00 2001
From: isaaclombardssw <isaaclombard@ssw.com.au>
Date: Thu, 23 Jul 2026 10:32:17 +1000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20Resolve=20mobile=20header=20?=
 =?UTF-8?q?appearance=20server-side=20to=20fix=20CLS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header renders in the root layout, which has no access to the current
page's data, so hiding the mobile country flag / Contact button ran in a
client effect after hydration — reflowing the header and everything below it
(CLS 0.133 on /events/ai-for-business-leaders, which hides both).

Replace the post-hydration client context with a server-rendered marker: an
opting-out page now emits a hidden [data-mm-hide-flag]/[data-mm-hide-contact]
element, and unlayered CSS in styles.css hides the matching ssw.megamenu
elements via :has() on first paint. SSR and hydration now match, and
client-side navigation swaps the marker with the page so the header stays
correct with no header-side JS.

Chose CSS over the middleware x-pathname path the code comment documented:
reading headers() in the root layout would opt every route out of static
generation and conflicts with `dynamic = "force-static"` on the events route.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q8genJyZboXaa4vgYhJF4P
---
 .../events/[...filename]/eventsv2.tsx         |  4 +-
 app/components/header-appearance.tsx          | 51 +++++++------------
 app/components/page-layout.tsx                | 19 +++----
 components/server/MegaMenuWrapper.tsx         | 12 ++---
 styles.css                                    | 15 ++++++
 5 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/app/(events)/events/[...filename]/eventsv2.tsx b/app/(events)/events/[...filename]/eventsv2.tsx
index 0a04498b2e..419fbf9bcc 100644
--- a/app/(events)/events/[...filename]/eventsv2.tsx
+++ b/app/(events)/events/[...filename]/eventsv2.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useMobileHeaderAppearance } from "@/app/components/header-appearance";
+import { HeaderAppearanceMarker } from "@/app/components/header-appearance";
 import { Blocks } from "@/components/blocks-renderer";
 import { Container } from "@/components/util/container";
 import { Section } from "@/components/util/section";
@@ -17,9 +17,9 @@ type EventsV2PageProps<T> = {
 const EventsV2Page = memo(
   function EventsV2Page({ tinaProps }: EventsV2PageProps<object>) {
     const { blocks, appearance } = tinaProps.data.eventsv2;
-    useMobileHeaderAppearance(appearance ?? null);
     return (
       <div className="dark flex h-full flex-col">
+        <HeaderAppearanceMarker appearance={appearance} />
         <Section color={"toggleLightMode"}>
           <Container
             size="custom"
diff --git a/app/components/header-appearance.tsx b/app/components/header-appearance.tsx
index 01694b16e2..f921d570e7 100644
--- a/app/components/header-appearance.tsx
+++ b/app/components/header-appearance.tsx
@@ -1,44 +1,27 @@
-"use client";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
-
 export type MobileHeaderAppearance = {
   hideFlag?: boolean | null;
   hideContactButton?: boolean | null;
 };
-type Ctx = {
-  mobile: MobileHeaderAppearance;
-  setMobile: (v: MobileHeaderAppearance) => void;
-};
-const HeaderAppearanceContext = createContext<Ctx>({
-  mobile: {},
-  setMobile: () => {},
-});
 
-export function HeaderAppearanceProvider({
-  children,
+// The header lives in the root layout and can't see the current page's data, so
+// hiding the mobile flag/Contact button used to happen in a client effect AFTER
+// hydration — reflowing the header and everything below it (CLS). Instead, the page
+// server-renders this hidden marker; CSS in styles.css reads it via `:has()` and hides
+// the elements on first paint, so SSR and hydration match. Client-side navigation swaps
+// the marker in/out with the page, so the header updates without any header-side JS.
+// (Middleware `x-pathname` + server resolution — the other documented fix — was rejected:
+// reading headers() in the root layout breaks the `dynamic = "force-static"` routes.)
+export function HeaderAppearanceMarker({
+  appearance,
 }: {
-  children: React.ReactNode;
+  appearance?: MobileHeaderAppearance | null;
 }) {
-  const [mobile, setMobile] = useState<MobileHeaderAppearance>({});
-  const value = useMemo(() => ({ mobile, setMobile }), [mobile]);
+  if (!appearance?.hideFlag && !appearance?.hideContactButton) return null;
   return (
-    <HeaderAppearanceContext.Provider value={value}>
-      {children}
-    </HeaderAppearanceContext.Provider>
+    <div
+      hidden
+      data-mm-hide-flag={appearance.hideFlag ? "" : undefined}
+      data-mm-hide-contact={appearance.hideContactButton ? "" : undefined}
+    />
   );
 }
-
-export const useHeaderAppearance = () => useContext(HeaderAppearanceContext);
-
-// ponytail: client context → SSR shows full header for one frame before hiding flag/
-// contact. Upgrade path if the flash matters: set `x-pathname` in middleware.ts and
-// resolve appearance server-side in app/layout.tsx so the header renders correctly at SSR.
-export function useMobileHeaderAppearance(
-  value: MobileHeaderAppearance | null
-) {
-  const { setMobile } = useHeaderAppearance();
-  useEffect(() => {
-    setMobile(value ?? {});
-    return () => setMobile({});
-  }, [value, setMobile]);
-}
diff --git a/app/components/page-layout.tsx b/app/components/page-layout.tsx
index ae2f75aa35..5798cfe9c8 100644
--- a/app/components/page-layout.tsx
+++ b/app/components/page-layout.tsx
@@ -1,5 +1,4 @@
 import { Footer } from "@/components/layout/footer/footer";
-import { HeaderAppearanceProvider } from "./header-appearance";
 
 type PageLayoutProps = {
   children: React.ReactNode;
@@ -12,16 +11,14 @@ const PageLayout = ({
   megaMenu,
 }: PageLayoutProps) => {
   return (
-    <HeaderAppearanceProvider>
-      <div className="flex min-h-screen flex-col">
-        <header className="no-print z-1">
-          {phishingBanner}
-          {megaMenu}
-        </header>
-        <main className="z-0 grow bg-white">{children}</main>
-        <Footer />
-      </div>
-    </HeaderAppearanceProvider>
+    <div className="flex min-h-screen flex-col">
+      <header className="no-print z-1">
+        {phishingBanner}
+        {megaMenu}
+      </header>
+      <main className="z-0 grow bg-white">{children}</main>
+      <Footer />
+    </div>
   );
 };
 
diff --git a/components/server/MegaMenuWrapper.tsx b/components/server/MegaMenuWrapper.tsx
index 2ef0246576..1d1ac5af52 100644
--- a/components/server/MegaMenuWrapper.tsx
+++ b/components/server/MegaMenuWrapper.tsx
@@ -3,19 +3,19 @@
 import classNames from "classnames";
 import { usePathname } from "next/navigation";
 import { MegaMenuLayout } from "ssw.megamenu";
-import { useHeaderAppearance } from "@/app/components/header-appearance";
 import { CustomLink } from "../customLink";
 
 export function MegaMenuWrapper(props) {
   const pathName = usePathname();
-  const { mobile } = useHeaderAppearance();
 
+  // Per-page hiding of the mobile flag/Contact button is handled by CSS reading a
+  // server-rendered marker (see header-appearance.tsx), so the header always renders
+  // both here and stays correct at SSR. Only the contact-us page (known at SSR from the
+  // pathname) hides the phone via the package itself.
   return (
     <MegaMenuLayout
-      hidePhone={
-        pathName === "/company/contact-us" || Boolean(mobile.hideContactButton)
-      }
-      isFlagVisible={!mobile.hideFlag}
+      hidePhone={pathName === "/company/contact-us"}
+      isFlagVisible={true}
       menuBarItems={props.menu}
       tagline="Enterprise Software Development"
       linkComponent={(props) => (
diff --git a/styles.css b/styles.css
index 6adeb17399..f183c2c6a5 100644
--- a/styles.css
+++ b/styles.css
@@ -281,3 +281,18 @@
     }
   }
 }
+
+/*
+ * Mobile header appearance (CLS fix — see app/components/header-appearance.tsx).
+ * A page that opts out server-renders a hidden [data-mm-hide-flag] / [data-mm-hide-contact]
+ * marker; these rules hide the matching ssw.megamenu elements on first paint instead of
+ * after hydration. Selectors target ssw.megamenu@4.13.8 internals — revisit on upgrade.
+ * Left unlayered so they beat Tailwind's @layer utilities without !important.
+ */
+body:has([data-mm-hide-flag]) header .xl\:hidden button:has(img[alt$="flag" i]),
+body:has([data-mm-hide-flag]) header .xl\:hidden .h-4.w-px {
+  display: none;
+}
+body:has([data-mm-hide-contact]) header .gap-2.sm\:flex-grow-0 {
+  display: none;
+}

From 916ec54e454614a2051e69fa3e175c2f9d0c456e Mon Sep 17 00:00:00 2001
From: isaaclombardssw <isaaclombard@ssw.com.au>
Date: Thu, 23 Jul 2026 11:55:57 +1000
Subject: [PATCH 2/2] Document :has() graceful degradation for Firefox < 121

The mobile-header CLS fix relies on body:has(...) selectors. browserslist
lists firefox >= 111 but :has() only shipped in Firefox 121; on 111-120 the
opt-out simply no-ops (flag/Contact stay visible, no layout shift). Note the
graceful degradation in the CSS comment so the trade-off is explicit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q8genJyZboXaa4vgYhJF4P
---
 styles.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/styles.css b/styles.css
index f183c2c6a5..42f3a5c3de 100644
--- a/styles.css
+++ b/styles.css
@@ -288,6 +288,8 @@
  * marker; these rules hide the matching ssw.megamenu elements on first paint instead of
  * after hydration. Selectors target ssw.megamenu@4.13.8 internals — revisit on upgrade.
  * Left unlayered so they beat Tailwind's @layer utilities without !important.
+ * Degrades gracefully where :has() is unsupported (Firefox < 121): the flag/Contact
+ * button simply stay visible — no layout shift, just no opt-out.
  */
 body:has([data-mm-hide-flag]) header .xl\:hidden button:has(img[alt$="flag" i]),
 body:has([data-mm-hide-flag]) header .xl\:hidden .h-4.w-px {