From 52f9c17066ef0b6e558727bd0461b7baca7242e3 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Tue, 17 Sep 2024 10:15:59 +0200
Subject: [PATCH] search: fix responsiveness issue on md screens

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 hugo_stats.json              |  3 ---
 layouts/_default/search.html | 42 +++++++++++++++++-------------------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/hugo_stats.json b/hugo_stats.json
index 1d93441bba..74d009b00c 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -350,7 +350,6 @@
       "lg:pb-2",
       "lg:scale-100",
       "lg:text-base",
-      "lg:w-[1200px]",
       "link",
       "lntable",
       "lntd",
@@ -432,7 +431,6 @@
       "placeholder:text-white",
       "pr-2",
       "prose",
-      "pt-0",
       "pt-4",
       "px-1",
       "px-2",
@@ -529,7 +527,6 @@
       "w-[32px]",
       "w-fit",
       "w-full",
-      "w-lvw",
       "w-screen",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index af069ba1b1..72b2059c8d 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -3,29 +3,27 @@
 {{ end }}
 
 {{ define "main" }}
-  <div class="w-lvw overflow-clip p-6 pt-0 lg:w-[1200px]">
-    <article class="prose max-w-none dark:prose-invert">
-      <h1 class="py-4">{{ .Title }}</h1>
-      {{ .Content }}
-      <div class="not-prose">
-        <div class="flex gap-4">
-          <input type="search" id="search-page-input"
-            class="ring-[1.5px] ring-gray-light-200 dark:ring-gray-dark-400 w-full max-w-xl rounded px-4 py-2 outline-none bg-white dark:bg-background-dark focus:ring-blue-light dark:focus:ring-blue-dark"
-            placeholder="Search…" tabindex="0" />
-          <button
-            class="py-1 px-4 rounded open-kapa-widget flex w-fit gap-2 items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
-            <span>Ask&nbsp;AI</span>
-            <img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
-              alt="AI sparkles!" />
-          </button>
-        </div>
-        <hr class="border-divider-light dark:border-divider-dark">
-        <div id="search-page-results">
-          <!-- results -->
-        </div>
+  <article class="prose max-w-none dark:prose-invert">
+    <h1 class="py-4">{{ .Title }}</h1>
+    {{ .Content }}
+    <div class="not-prose">
+      <div class="flex gap-4">
+        <input type="search" id="search-page-input"
+          class="ring-[1.5px] ring-gray-light-200 dark:ring-gray-dark-400 w-full max-w-xl rounded px-4 py-2 outline-none bg-white dark:bg-background-dark focus:ring-blue-light dark:focus:ring-blue-dark"
+          placeholder="Search…" tabindex="0" />
+        <button
+          class="py-1 px-4 rounded open-kapa-widget flex w-fit gap-2 items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
+          <span>Ask&nbsp;AI</span>
+          <img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
+            alt="AI sparkles!" />
+        </button>
       </div>
-    </article>
-  </div>
+      <hr class="border-divider-light dark:border-divider-dark">
+      <div id="search-page-results">
+        <!-- results -->
+      </div>
+    </div>
+  </article>
   <script type="module">
     // Global variable to hold the pagefind module
     let pagefind;