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.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user