Fix: fix global search input layout shifting (#14491)

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

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);