From 789e8b2970f198ef435254661d0dfaab4a02ab3b Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 06:07:30 +0200 Subject: [PATCH] Centre the app bar's headline on a grid and curve its search bar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The centred headline was absolutely positioned 56px in from each edge — room for exactly one of M3's two trailing icon buttons, so a long title ellipsised behind them. It is now the middle column of a three-column row and shrinks against whatever is really beside it. The search container follows M3's curve, filling the row to 312dp and then only half of what is left, so the showcase drops the hand-written max-width it had been working around it with. Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-09, N-11). Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/components/app-bar.css | 48 +++++++++++++++++------ resources/views/showcase/layout.blade.php | 2 +- tests/Feature/Components/AppBarTest.php | 11 ++++++ 3 files changed, 48 insertions(+), 13 deletions(-) diff --git a/resources/css/components/app-bar.css b/resources/css/components/app-bar.css index 6afd0149..f1ce615c 100644 --- a/resources/css/components/app-bar.css +++ b/resources/css/components/app-bar.css @@ -4,10 +4,11 @@ * * small 64px, title-large title (label-medium subtitle), 4px from the edges, the title 16px * from the start or straight after the navigation icon - * center the same, the title centred + * center the same, the title centred — a three-column grid, so it shrinks against whatever is + * beside it rather than ellipsising underneath it * medium 112px (136px with a subtitle): the 64px row of icons over a headline-medium title * large 120px (152px with a subtitle): a display-small title - * search the row holds a search bar + * search the row holds a search bar, full width to 312px and then half of what is left * * The container is the surface, and surface-container once content scrolls under it. A medium or * large bar collapses into the small one without script moving anything: the bar is sticky at a @@ -118,21 +119,44 @@ letter-spacing: var(--md-sys-typescale-label-md-tracking); } - /* Centred: the headline spans the row and centres its text between whatever is at either end. */ - [data-app-bar][data-variant="center"] [data-app-bar-headline] { - position: absolute; - inset-inline: 3.5rem; - top: 0; - bottom: 0; - align-items: center; - text-align: center; - pointer-events: none; + /* Centred: a three-column row — leading, headline, trailing — so the headline is centred in the + window and shrinks against whatever is actually beside it. M3 allows two trailing icon + buttons, which a fixed inset for one would have let a long title ellipsise underneath. */ + [data-app-bar][data-variant="center"] [data-app-bar-row] { + display: grid; + grid-template-columns: 1fr auto 1fr; } - /* The search bar fills the row. */ + [data-app-bar][data-variant="center"] [data-app-bar-leading] { + grid-column: 1; + justify-self: start; + } + + [data-app-bar][data-variant="center"] [data-app-bar-headline] { + grid-column: 2; + min-width: 0; + align-items: center; + justify-self: center; + padding-inline: 0.75rem; + text-align: center; + } + + [data-app-bar][data-variant="center"] [data-app-bar-trailing] { + grid-column: 3; + justify-self: end; + margin-inline-start: 0; + } + + /* The search bar fills the space between the leading and trailing elements until it is 312dp + wide, and then grows into only half of what is left + (docs/reference/m3/components-navigation-selection-inputs.md § Top app bar). The percentage + is of the row rather than of that space, which CSS cannot name without measuring it; below + 312px the cap never binds, so a phone still gets the whole row. */ [data-app-bar-search] { min-width: 0; + max-width: calc(19.5rem + (100% - 19.5rem) / 2); flex: 1 1 0%; + margin-inline: auto; padding-inline: 0.25rem; } diff --git a/resources/views/showcase/layout.blade.php b/resources/views/showcase/layout.blade.php index e30466e9..c9f00244 100644 --- a/resources/views/showcase/layout.blade.php +++ b/resources/views/showcase/layout.blade.php @@ -57,7 +57,7 @@ fetched on first focus, and / or Ctrl+K (⌘K) reaches it from anywhere. Its names keep clear of 's own (`results`, `open`), which the slot also sees. --}}
toContain('max-width: calc(19.5rem + (100% - 19.5rem) / 2);'); +}); + it('keeps a toolbar at the bottom clear of the navigation bar', function () { $css = file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css');