Let the mobile search dialog fill the screen, and put Cancel by the field

site/package.json

@@ -9,7 +9,7 @@
     "preview": "astro preview",
     "check": "astro check",
     "check:changelog": "node ./scripts/changelog-dates.mjs",
-    "check:css": "node ./scripts/css-shadowing.mjs --max 26",
+    "check:css": "node ./scripts/css-shadowing.mjs --max 24",
     "test:a11y": "npm run build && node ./scripts/a11y.mjs"
   },
   "dependencies": {

site/src/styles/starlight/08-search-modal.css

@@ -31,13 +31,30 @@ site-search dialog .search-container {
   max-height: calc(100vh - 9.5rem);
 }
 
+/* The whole chain from the dialog down to the drawer has to be able to
+ * shrink, or none of it does.
+ *
+ * `#starlight__search` was already a flex column, but the drawer is two
+ * levels below it -- `.pagefind-ui` and then `.pagefind-ui__form` sit in
+ * between, both `display: block` with `min-height: auto`. A flex item will
+ * not shrink below its content without `min-height: 0`, so those two took
+ * their full content height (1936px inside a 646px parent) and the drawer
+ * grew with them, scrolling the page rather than itself.
+ *
+ * The form was `flex: 0 0 auto`, which was right when it held only the
+ * input. It holds the drawer too, so it has to be the part that grows. */
+#starlight__search .pagefind-ui,
 #starlight__search .pagefind-ui__form {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
 
+#starlight__search .pagefind-ui__form {
   inset-block-start: 0;
-
-  flex: 0 0 auto;
 }#starlight__search .pagefind-ui__drawer {
-  min-height: 0;
+
   padding-inline-end: 0.2rem;
 }
 
@@ -54,13 +71,11 @@ site-search dialog .search-container {
 #starlight__search .pagefind-ui__drawer:has(.pagefind-ui__result)::before {
   top: 0;
 
-
 }
 
 #starlight__search .pagefind-ui__drawer:has(.pagefind-ui__result)::after {
   bottom: 0;
 
-
 }
 
 #starlight__search .pagefind-ui__results-area {
@@ -178,3 +193,55 @@ html[data-theme='light'] #starlight__search .pagefind-ui__drawer:has(.pagefind-u
   border-color: rgba(17, 24, 39, 0.18);
   color: #44516a;
 }
+
+/* ─── Narrow-screen search dialog ───────────────────────────────────────
+ *
+ * Three faults, all measured at 500x708 with results on screen.
+ *
+ * 1. The results stopped 151px above the bottom of the screen. The cause is
+ *    exact: `#starlight__search` carried `max-height: calc(100vh - 9.5rem)`,
+ *    and 9.5rem is 152px -- a fixed reservation for dialog chrome that does
+ *    not exist at this size, where the dialog is inset 9px and nearly
+ *    full-height. The drawer's bottom landed at 557 in a 708 viewport.
+ *
+ * 2. Cancel sat beside the *results* rather than the search field. Starlight
+ *    lays the frame out as `"search close" / "drawer drawer"` and centres the
+ *    close button in the search row. That is right when the row is just the
+ *    input -- but the row holds the whole Pagefind UI, so it was 532px tall
+ *    and the button centred at y=287, halfway down the results.
+ *
+ * 3. The clear control floated 83px short of the field's trailing edge
+ *    instead of sitting at it.
+ *
+ * The `align-content` half of the fix is in 20-docs-shell-closeout.css, at
+ * the declaration that caused it: `!important` against `!important` at equal
+ * specificity is settled by file order, and 20 loads after this file.
+ */
+@media (max-width: 49.99rem) {
+  site-search dialog .search-container,
+  #starlight__search {
+    /* Fill the row the frame now stretches, rather than a guess at what the
+       chrome around it costs. */
+    max-height: 100% !important;
+    height: 100% !important;
+  }
+
+  /* Level with the input, not centred against the whole results column.
+     The margin reset matters: without it an inherited block margin pushed
+     the button 18px below the field it sits beside. */
+  site-search dialog .dialog-frame > button {
+    align-self: start !important;
+    margin-block: 2px 0 !important;
+  }
+
+  /* At the field's trailing edge, inside it. */
+  #starlight__search .pagefind-ui__search-clear {
+    position: absolute !important;
+    inset-inline-end: 0.35rem !important;
+    inset-block-start: 0.25rem !important;
+  }
+
+  #starlight__search .pagefind-ui__form {
+    position: relative !important;
+  }
+}

site/src/styles/starlight/10-docs-feedback.css

@@ -16,7 +16,22 @@
 
 #starlight__search .pagefind-ui__drawer {
   margin-block-start: 1rem !important;
-  max-height: calc(100vh - 15rem) !important;
+  /* Take the space the form leaves, and scroll inside it.
+   *
+   * This was `calc(100vh - 15rem)` -- 240px reserved for chrome that does not
+   * exist at phone sizes, which left the results ending 151px above the
+   * bottom of the screen inside a dialog running nearly the full height.
+   *
+   * `max-height: 100%` is not the fix either: the ancestors have no definite
+   * height for a percentage to resolve against, so the drawer fell back to
+   * its content height and pushed 1253px past the viewport, scrolling the
+   * page instead of itself. `#starlight__search` is already a flex column, so
+   * growing into the leftover space is what actually bounds it -- with
+   * `min-height: 0`, without which a flex item refuses to shrink below its
+   * content and the overflow comes straight back. */
+  flex: 1 1 auto !important;
+  min-height: 0 !important;
+  max-height: none !important;
   overflow-y: auto !important;
   overscroll-behavior: contain !important;
   scrollbar-gutter: stable !important;

site/src/styles/starlight/14-docs-nav-table.css

@@ -14,6 +14,9 @@
 @media (max-width: 71.99rem) {
   .right-sidebar-container {
 
+
+
+
     background: var(--sl-color-bg);
     border-bottom: 1px solid var(--sl-color-hairline) !important;
   }
@@ -27,6 +30,9 @@
 
   .right-sidebar {
 
+
+
+
     overflow: visible !important;
     border: 0 !important;
   }

site/src/styles/starlight/20-docs-shell-closeout.css

@@ -68,7 +68,6 @@ html[data-theme='light'] .right-sidebar-panel :where(a[aria-current='location'])
 
   .docs-topbar {
 
-
     gap: 0.45rem !important;
   }
 
@@ -79,7 +78,6 @@ html[data-theme='light'] .right-sidebar-panel :where(a[aria-current='location'])
     max-width: 2.5rem !important;
     min-width: 2.5rem !important;
 
-
   }
 
   .docs-header-search site-search,
@@ -238,7 +236,19 @@ html[data-theme='light'] .right-sidebar-panel :where(a[aria-current='location'])
   }
 
   site-search dialog .dialog-frame {
-    align-content: start !important;
+    /* `stretch`, not `start`.
+     *
+     * `start` stopped the grid rows growing, so on a phone the results
+     * drawer ended 151px above the bottom of the screen while the dialog
+     * around it ran nearly the full height. It was added here with no stated
+     * reason; whatever empty-state height it was guarding is set directly by
+     * the `min-height: 10rem` rules in 06-docs-interaction-a.css.
+     *
+     * This has to be the declaration that changes rather than an override in
+     * 08-search-modal.css, where the rest of this fix lives: `!important`
+     * against `!important` at equal specificity is decided by file order, and
+     * 20 loads after 08. */
+    align-content: stretch !important;
   }
 
   site-search dialog .dialog-frame > * {

site/src/styles/starlight/23-regression-guardrails.css

@@ -1,9 +1,3 @@
-/* Final regression guardrails: keep these last. */
-.sidebar-content :where(details > ul) {
-
-  border-inline-start: 1px solid var(--sl-color-hairline) !important;
-}
-
 .sidebar-content :where(details > ul a) {
 
   width: calc(100% + 1px) !important;
@@ -51,7 +45,13 @@
     grid-column: 2 !important;
     grid-row: 1 !important;
     justify-self: end !important;
-    align-self: center !important;
+    /* `start`, not `center`.
+     *
+     * The cell this button sits in is grid row 1, which holds the entire
+     * Pagefind UI -- input and results together -- so it is ~590px tall on a
+     * phone. Centring in it put Cancel at y=287, level with the middle of the
+     * results list rather than with the search field it cancels. */
+    align-self: start !important;
     margin: 0 !important;
     min-height: 2.75rem !important;
   }

site/src/styles/starlight/24-mobile-regression-guardrails.css

@@ -1,10 +1,3 @@
-/* Final mobile/docs regression guardrails. Keep these last so Starlight and
-   earlier site overrides cannot reintroduce the checked regressions. */
-.sidebar-content :where(details > ul) {
-
-  border-inline-start: 1px solid var(--sl-color-hairline) !important;
-}
-
 .sidebar-content :where(details > ul a),
 .sidebar-content :where(details > ul a:hover),
 .sidebar-content :where(details > ul a[aria-current="page"]) {
@@ -51,7 +44,13 @@
   site-search dialog button[aria-label="Cancel"],
   site-search dialog .search-cancel {
     grid-area: close !important;
-    align-self: center !important;
+    /* `start`, not `center`.
+     *
+     * The cell this button sits in is grid row 1, which holds the entire
+     * Pagefind UI -- input and results together -- so it is ~590px tall on a
+     * phone. Centring in it put Cancel at y=287, level with the middle of the
+     * results list rather than with the search field it cancels. */
+    align-self: start !important;
     justify-self: end !important;
     margin: 0 !important;
     min-height: 2.75rem !important;

site/src/styles/starlight/28-final-interaction-guardrails.css

@@ -253,7 +253,13 @@ a.download-count:focus-visible,
 
   site-search dialog :where(button[data-close-modal], button[aria-label="Cancel"], .search-cancel) {
     grid-area: close !important;
-    align-self: center !important;
+    /* `start`, not `center`.
+     *
+     * The cell this button sits in is grid row 1, which holds the entire
+     * Pagefind UI -- input and results together -- so it is ~590px tall on a
+     * phone. Centring in it put Cancel at y=287, level with the middle of the
+     * results list rather than with the search field it cancels. */
+    align-self: start !important;
     justify-self: end !important;
     margin: 0 !important;
     min-height: 2.75rem !important;