From b0fe7b15caa22d610bdc430e96ae0f1dc80557bc Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Thu, 4 Jun 2026 10:23:05 -0400
Subject: [PATCH] fix(theme): render app-shell on desktop Chromium via
 ::details-content (0.2.1)

Chromium >=121 wraps a <details>'s content in a generated ::details-content
box with content-visibility:hidden while closed. The SSR app-shell ships
closed (no JS) and hides its summary toggle at lg+, so on desktop the rail+page
were invisible and the flex-lg-row layout collapsed to a vertical stack.

Add '.app-shell::details-content { display: contents }' inside the lg+ media
query: dissolving the wrapper box reveals the content regardless of open state
and restores rail/page as direct flex children of .app-shell. Browsers without
::details-content support drop the invalid selector and fall back to the legacy
force-show. Mobile (<lg) and nested NavRailSection disclosures unaffected.

Bump 0.2.0 -> 0.2.1.
---
 ZB.MOM.WW.Theme/Directory.Build.props              |  2 +-
 .../src/ZB.MOM.WW.Theme/wwwroot/css/layout.css     | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/ZB.MOM.WW.Theme/Directory.Build.props b/ZB.MOM.WW.Theme/Directory.Build.props
index d29d7f2..94422ba 100644
--- a/ZB.MOM.WW.Theme/Directory.Build.props
+++ b/ZB.MOM.WW.Theme/Directory.Build.props
@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <LangVersion>latest</LangVersion>
-    <Version>0.2.0</Version>
+    <Version>0.2.1</Version>
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
   </PropertyGroup>
 </Project>
diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
index bb74c69..838fe06 100644
--- a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
@@ -47,6 +47,20 @@
    and force it shown regardless of the <details> open state (the hamburger
    toggle is hidden at this width). */
 @media (min-width: 992px) {
+    /* Chromium >=121 wraps a <details>'s content in a generated ::details-content
+       box that carries content-visibility:hidden while the <details> is closed.
+       Because our app-shell ships closed by default (SSR, no JS) and the toggle
+       is d-lg-none here, that wrapper would (a) hide the rail+page entirely on
+       lg+ and (b) sit between .app-shell and its rail/page children, collapsing
+       the flex-lg-row layout into a vertical stack. Dissolving the wrapper with
+       display:contents removes its box (so content-visibility no longer hides the
+       content AND rail/page become direct flex children of .app-shell again).
+       Browsers that don't support ::details-content treat this as an invalid
+       selector and drop the rule, falling back to the legacy force-show below. */
+    .app-shell::details-content {
+        display: contents;
+    }
+
     #theme-rail {
         display: block;
         position: sticky;