ATLAS-5297: Atlas React UI: Topbar alignment and spacing issue in header section (#643)

dashboard/src/components/GlobalSearch/QuickSearch.tsx

diff --git a/dashboard/src/components/GlobalSearch/QuickSearch.tsx b/dashboard/src/components/GlobalSearch/QuickSearch.tsx
index c8eba94..5845296 100644
--- a/dashboard/src/components/GlobalSearch/QuickSearch.tsx
+++ b/dashboard/src/components/GlobalSearch/QuickSearch.tsx
@@ -388,6 +388,7 @@
 				className="global-search-stack"
 				alignItems="center"
 				gap="0.5rem"
+				sx={{ minWidth: 0, flexShrink: 1 }}
 			>
 				<FormControl
 					size="small"
@@ -436,8 +437,8 @@
 						disablePortal
 						className="global-search-autocomplete"
 						sx={{
-							minWidth: 280,
-							flex: 1,
+							minWidth: 150,
+							flex: "1 1 280px",
 							"& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
 								backgroundColor: "white"
 							},

dashboard/src/views/Layout/Header.tsx

diff --git a/dashboard/src/views/Layout/Header.tsx b/dashboard/src/views/Layout/Header.tsx
index 80fc2dc..3155639 100644
--- a/dashboard/src/views/Layout/Header.tsx
+++ b/dashboard/src/views/Layout/Header.tsx
@@ -182,14 +182,14 @@
       )}
       {location.pathname !== "/" &&
         location.pathname !== "/search" && (
-          <div style={{ display: "flex", justifyContent: "center", flex: "1" }}>
+          <div style={{ display: "flex", justifyContent: "center", flex: "1", minWidth: 0, padding: "0 16px" }}>
             <QuickSearch />
           </div>
         )}
       {(location.pathname === "/" || location.pathname === "/search") && (
         <div style={{ flex: "1" }} />
       )}
-      <div className="header-menu" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+      <div className="header-menu" style={{ display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
         <CreateDropdown />
         <LightTooltip title="Downloads">
           <IconButton