From fd187cd09afcd82d1e831ab6ab794ec38a9d5305 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 19 Oct 2026 09:39:26 -0700
Subject: [PATCH] Fix: fix global search input layout shifting (#14491)

---
 .../app/components/app-frame/app-frame.component.scss |  6 ++++++
 .../global-search/global-search.component.scss        | 11 +++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 44bebd82e..cb4f3f29d 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -66,6 +66,7 @@
 }
 
 .search-container {
+  min-width: 0;
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -499,6 +500,11 @@ main {
 
 // true center the search with equal flex widths
 @media (min-width: 768px) {
+  .search-container {
+    // Prevent input padding and the conditional search button from resizing
+    flex-basis: 55rem;
+  }
+
   .navbar-brand-container,
   .navbar > ul {
     display: flex; // so the brand link stays as wide as its contents
diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.scss b/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
index 274eed472..0576a81db 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
@@ -70,6 +70,17 @@ form {
   max-height: 75vh;
 }
 
+.dropdown.show {
+  // Hide the search icon when the dropdown is shown
+  i-bs[name="search"] {
+    display: none !important;
+  }
+
+  .form-control {
+    padding-left: 0.5rem;
+  }
+}
+
 .dropdown-item {
   &:has(button:focus) {
     background-color: var(--pngx-bg-darker);