From 081a0159d84b21909e7690b4173409f68dd301f6 Mon Sep 17 00:00:00 2001
From: David Battersby <info@davidbattersby.com>
Date: Mon, 3 Mar 2025 09:36:53 +0400
Subject: [PATCH] UX: search dropdown layout improvements (#31568)

This change improves the alignment and placement of the search spinner
and icons (ie. clear search / advanced search). Having a fixed width on
desktop prevents the search field from changing width when the loading
icon is toggled.
---
 app/assets/stylesheets/common/base/search-menu.scss    |  3 +--
 .../stylesheets/desktop/components/header-search.scss  | 10 ++--------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index a906f022b2b..e0de058fe86 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -382,13 +382,12 @@ $search-pad-horizontal: 0.5em;
       width: 12px;
       height: 12px;
       border-width: 2px;
-      margin: 0;
+      margin: 0 0.5em 0.25em 0;
       margin-top: 2px;
     }
 
     .show-advanced-search,
     a.clear-search {
-      padding: 0 3px;
       display: inline-block;
       background-color: transparent;
 
diff --git a/app/assets/stylesheets/desktop/components/header-search.scss b/app/assets/stylesheets/desktop/components/header-search.scss
index 5e24ac77498..e30d466db4d 100644
--- a/app/assets/stylesheets/desktop/components/header-search.scss
+++ b/app/assets/stylesheets/desktop/components/header-search.scss
@@ -72,20 +72,14 @@
           }
 
           .searching {
-            display: flex;
-            padding-right: 0.5rem;
+            width: 3em;
+            justify-content: flex-end;
 
             .show-advanced-search,
             a.clear-search {
               display: inline-flex;
               align-items: center;
             }
-
-            .spinner-holder {
-              display: inline-block;
-              vertical-align: top;
-              margin-left: 4px;
-            }
           }
 
           .search-icon {