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 <x-search>'s own (`results`, `open`), which the slot also sees. --}}
                     <div
-                        class="mx-auto w-full max-w-2xl"
+                        class="w-full"
                         x-data="{
                             query: '',
                             entries: null,
diff --git a/tests/Feature/Components/AppBarTest.php b/tests/Feature/Components/AppBarTest.php
index dee068bc..cce2723e 100644
--- a/tests/Feature/Components/AppBarTest.php
+++ b/tests/Feature/Components/AppBarTest.php
@@ -69,6 +69,17 @@ it('draws floating and docked toolbars', function () {
         ->not->toContain('data-toolbar-group');
 });
 
+it('centres a headline on a three-column row and curves the search container', function () {
+    $css = file_get_contents(__DIR__.'/../../../resources/css/components/app-bar.css');
+
+    expect($css)
+        // Not a fixed 56px inset, which fits exactly one of M3's two trailing buttons (N-11).
+        ->not->toContain('inset-inline: 3.5rem;')
+        ->toMatch('/\[data-variant="center"\] \[data-app-bar-row\] \{\s+display: grid;\s+grid-template-columns: 1fr auto 1fr;/')
+        // 312dp, then half of what is left (N-09).
+        ->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');