From 7d6e6184b1f0e334906137f4d786205cafb8ce19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?=
 <bjorn.erik.pedersen@gmail.com>
Date: Wed, 12 Feb 2025 13:34:38 +0100
Subject: [PATCH] theme: Move search button in navbar to the right on smaller
 screens

Closes #2886
---
 layouts/partials/layouts/header/header.html | 5 +++--
 layouts/partials/layouts/header/qr.html     | 2 +-
 layouts/partials/layouts/search/button.html | 6 +++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/layouts/partials/layouts/header/header.html b/layouts/partials/layouts/header/header.html
index 65a21440b..141db84d1 100644
--- a/layouts/partials/layouts/header/header.html
+++ b/layouts/partials/layouts/header/header.html
@@ -24,11 +24,12 @@
 
   </div>
 
-  <div class="-my-5 pl-2 sm:mr-8">
+  <div class="-my-5 pl-2 grow-0">
     {{/* Search. */}}
     {{ partial "layouts/search/input.html" . }}
   </div>
-  <div class="relative flex basis-0 justify-end gap-6 sm:gap-1 md:flex-grow">
+  <div
+    class="relative ml-0 md:ml-8 flex basis-0 justify-end gap-0 sm:gap-1 xl:grow-1">
     {{/* QR code. */}}
     {{ partial "layouts/header/qr.html" . }}
     {{/* Theme selector. */}}
diff --git a/layouts/partials/layouts/header/qr.html b/layouts/partials/layouts/header/qr.html
index d6d28af2e..3d3f62e17 100644
--- a/layouts/partials/layouts/header/qr.html
+++ b/layouts/partials/layouts/header/qr.html
@@ -6,7 +6,7 @@
 {{ $qrBig := partial "partials/_inline/qr" (dict "page" $ "img_class" "w-64 p-4") }}
 {{ $t.Stop }}
 <div
-  class="hidden lg:block cursor-pointer outline-2 hover:outline-3 outline-blue-500">
+  class="hidden lg:block cursor-pointer outline-2 hover:outline-3 outline-blue-500 w-10 h-10">
   {{ partial "layouts/blocks/modal.html"  (dict "modal_button" $qr "modal_content" $qrBig "modal_title" (printf "QR code linking to %s" $.Permalink )) }}
 </div>
 
diff --git a/layouts/partials/layouts/search/button.html b/layouts/partials/layouts/search/button.html
index 1fc29b04c..3dcb1eb9d 100644
--- a/layouts/partials/layouts/search/button.html
+++ b/layouts/partials/layouts/search/button.html
@@ -3,12 +3,12 @@
     x-data @click="$dispatch('search-toggle')"
   {{ end }}
   type="button"
-  class="grid cursor-pointer w-full text-gray-500 sm:w-40 lg:w-56 grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
+  class="grid cursor-pointer w-full text-gray-500 lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
   <svg
-    class="pointer-events-none -ml-0.5 size-5 sm:size-4 fill-slate-400 dark:fill-slate-500">
+    class="pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4 fill-slate-400 dark:fill-slate-500">
     <use href="#icon--search"></use>
   </svg>
-  <span class="hidden sm:inline">Search docs</span
+  <span class="hidden lg:inline">Search docs</span
   ><kbd
     class="hidden font-sans text-xs/4 text-gray-400 dark:text-gray-400 sm:[.os-macos_&amp;]:block"
     ><span class="text-gray-400/70 ">⌘</span>K</kbd