fix: search display (#23250)

Author: ArthurFlag

layouts/_default/search.html

@@ -7,18 +7,19 @@
     <h1 class="py-4">{{ .Title }}</h1>
     {{ .Content }}
     <div class="not-prose">
-      <div class="flex flex-col justify-between gap-8 lg:flex-row">
+      <div class="flex justify-between gap-8 flex-row">
         <input type="search" id="search-page-input"
           class="ring-3-gray-light-200 dark:ring-3-gray-dark-400 dark:bg-background-dark focus:ring-3-blue-light dark:focus:ring-3-blue-dark ring-3-[1.5px] w-full max-w-xl min-w-0 rounded-sm bg-white px-4 py-2 outline-hidden"
           placeholder="Search…" tabindex="0" />
-        <div class="admonition flex flex-row min-w-fit items-center gap-1">
+        <div class="admonition flex flex-row items-center gap-1">
           <p>Not finding what you're looking for? Try</p>
           <button onclick="askAI('search-page-input')" class="topbar-button bg-blue-400/95 border-blue-300 hover:bg-blue-400/90">
             <span>Ask&nbsp;AI</span>
             <span class="icon-svg">
               {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
             </span>
           </button>
+        </div>
       </div>
       <hr class="border-divider-light dark:border-divider-dark" />
       <div id="search-page-results">

layouts/partials/search-bar.html

@@ -91,9 +91,9 @@
             resultsHTML += results
               .map((item) => {
                 return `<div class="p-2">
-                <div class="flex flex-col">
+                <div class="flex flex-col items-start item">
                   <a class="link" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
-                  <p class="text-black dark:text-white overflow-hidden">…${item.excerpt}…</p>
+                  <p class="text-black dark:text-white overflow-hidden text-left">…${item.excerpt}…</p>
                 </div>
                 </div>`;
               })