From 20b062846d0e45e8d4ddec229eed416e23f01864 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Tue, 15 Sep 2026 00:12:01 +0200 Subject: [PATCH] Keep rail-collapsed: alive in Tailwind for scaffold.blade.php's one use MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Plan step 36 follow-up. Deleting navigation.css also deleted the only definition of the rail-collapsed: custom variant, which scaffold.blade.php's data-app-shell-actions row still uses (rail-collapsed:flex-col) — scaffold's own rewrite is a later batch, so it is still Tailwind. Left alone, that class would silently stop matching anything. The definition moves into tailwind.css, updated to the data-md-* hooks navigation-rail.css now renders (data-rail and data-rail-auto are unchanged, so those branches needed nothing); otherwise it reproduces the same seven branches navigation-rail.css's own header documents, so the two cannot drift silently in what "collapsed" means. It goes with the scaffold's own rewrite. theme-script.blade.php's doc comment, which named the old variant, now points at navigation-rail.css directly. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/tailwind.css | 47 +++++++++++++++++++ .../views/components/theme-script.blade.php | 2 +- 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css index 8d88dea8..5052a092 100644 --- a/resources/css/tailwind.css +++ b/resources/css/tailwind.css @@ -16,3 +16,50 @@ @import './tokens/theme.css'; @import './tokens/utilities.css'; + +/* + * `rail-collapsed:` — Tailwind's, for the one class left that needs it: + * scaffold.blade.php's `data-app-shell-actions` row (`rail-collapsed:flex-col`), stacking the + * footer's icon buttons once the rail they sit in narrows. The definition used to live in + * navigation.css; that file is gone (plan step 36, navigation group), so this is what is left of + * it — updated to the `data-md-*` hooks navigation-rail.css now renders, otherwise identical to + * every branch that file's own header still documents. Goes with the scaffold's own rewrite, + * whenever `data-app-shell-actions` stops being a Tailwind class list. + */ +@custom-variant rail-collapsed { + &:where([data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *) { + @slot; + } + + &:where([data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *) { + @slot; + } + + &:where([data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) *) { + @slot; + } + + @media (width < 600px) { + &:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) { + @slot; + } + } + + @media (width < 840px) { + &:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) { + @slot; + } + } + + @media (840px <= width < 1200px) { + &:where(:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]), :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *) { + @slot; + } + } + + @media (width >= 1200px) { + &:where([data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *) { + @slot; + } + } +} diff --git a/resources/views/components/theme-script.blade.php b/resources/views/components/theme-script.blade.php index 4aa35998..f41cf9aa 100644 --- a/resources/views/components/theme-script.blade.php +++ b/resources/views/components/theme-script.blade.php @@ -28,7 +28,7 @@ The rail rides along for the theme's reason: is `expanded` or `collapsed` (`livewire-material.rail.storage_key`, falling back to `rail.default`), and a collapsible - rail's width is CSS keyed on it (the `rail-collapsed:` variant). Set any later, a collapsed + rail's width is CSS keyed on it directly (resources/css/components/navigation-rail.css). Set any later, a collapsed rail would paint wide and snap shut on every load. `$store.rail` (resources/js/navigation.js) changes it. rides with it and says nothing was stored — the value is only `rail.default`, not a choice — so ``'s adaptive rail can start collapsed in the