From f33ec7ae8c212b9fab09135b29157a445cb2f806 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Gianella?= <theo.gianella@proton.me>
Date: Thu, 7 May 2026 17:03:53 +0200
Subject: [PATCH 1/2] fix(search): scroll only results

---
 components/search-modal/element.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/search-modal/element.css b/components/search-modal/element.css
index 443257fd4..652ce1f36 100644
--- a/components/search-modal/element.css
+++ b/components/search-modal/element.css
@@ -48,7 +48,7 @@ dialog {
       "search   close"
       "progress progress"
       "results  results";
-    grid-template-rows: var(--navigation-height) min-content min-content;
+    grid-template-rows: var(--navigation-height) min-content 1fr;
     grid-template-columns: 1fr min-content;
   }
 }

From 068fda51477ad0f402b2719ba828dbe92e30b3de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Gianella?= <theo.gianella@proton.me>
Date: Fri, 29 May 2026 16:10:32 +0200
Subject: [PATCH 2/2] refactor: migrate search dialog from grid to flexbox

---
 components/search-modal/element.css | 29 +++++++++--------
 components/search-modal/element.js  | 50 +++++++++++++++--------------
 2 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/components/search-modal/element.css b/components/search-modal/element.css
index 652ce1f36..2d2a2f0de 100644
--- a/components/search-modal/element.css
+++ b/components/search-modal/element.css
@@ -42,19 +42,13 @@ dialog {
   }
 
   &[open] {
-    display: grid;
-
-    grid-template-areas:
-      "search   close"
-      "progress progress"
-      "results  results";
-    grid-template-rows: var(--navigation-height) min-content 1fr;
-    grid-template-columns: 1fr min-content;
+    display: flex;
+    flex-direction: column;
   }
 }
 
 progress {
-  grid-area: progress;
+  flex-shrink: 0;
   margin: 0 1rem 0.5rem;
 
   @media (--screen-menu-hamburger) {
@@ -62,8 +56,17 @@ progress {
   }
 }
 
+.header {
+  display: flex;
+
+  flex-shrink: 0;
+
+  align-items: center;
+
+  height: var(--navigation-height);
+}
+
 .close {
-  grid-area: close;
   font-size: 1.37rem;
 
   @media (--screen-menu-full) {
@@ -74,7 +77,8 @@ progress {
 form {
   display: grid;
 
-  grid-area: search;
+  flex: 1;
+
   grid-template-columns: min-content 1fr;
 
   gap: 0.5rem;
@@ -125,11 +129,8 @@ input {
 }
 
 ul {
-  grid-area: results;
-
   padding: 0;
   margin: 0;
-
   overflow: auto;
 
   &:has(li) {
diff --git a/components/search-modal/element.js b/components/search-modal/element.js
index 0edd8c0ba..f199be0f5 100644
--- a/components/search-modal/element.js
+++ b/components/search-modal/element.js
@@ -252,30 +252,32 @@ export class MDNSearchModal extends L10nMixin(LitElement) {
         @toggle=${this._toggle}
         closedby="any"
       >
-        <form
-          method="get"
-          action=${`/${this.locale}/search`}
-          @submit=${this._submit}
-        >
-          <input
-            type="search"
-            name="q"
-            .value=${this._query}
-            autocomplete="off"
-            autofocus
-            @input=${this._input}
-            placeholder=${this.l10n("search-modal-search")`Search`}
-            aria-label=${this.l10n("search-modal-search")`Search`}
-          />
-        </form>
-        <mdn-button
-          class="close"
-          variant="plain"
-          icon-only
-          .icon=${exitIcon}
-          @click=${this._close}
-          >${this.l10n("search-modal-exit-search")`Exit search`}</mdn-button
-        >
+        <div class="header">
+          <form
+            method="get"
+            action=${`/${this.locale}/search`}
+            @submit=${this._submit}
+          >
+            <input
+              type="search"
+              name="q"
+              .value=${this._query}
+              autocomplete="off"
+              autofocus
+              @input=${this._input}
+              placeholder=${this.l10n("search-modal-search")`Search`}
+              aria-label=${this.l10n("search-modal-search")`Search`}
+            />
+          </form>
+          <mdn-button
+            class="close"
+            variant="plain"
+            icon-only
+            .icon=${exitIcon}
+            @click=${this._close}
+            >${this.l10n("search-modal-exit-search")`Exit search`}</mdn-button
+          >
+        </div>
         ${this._queryIndex.render({
           initial: this._renderLoadingSearchIndex.bind(this),
           pending: this._renderLoadingSearchIndex.bind(this),