Revert "ATLAS-5297: Atlas React UI: Topbar alignment and spacing issue in hea…" (#642)

This reverts commit ee7fa0d.

Author: pawarprasad123

dashboard/src/components/GlobalSearch/QuickSearch.tsx

@@ -198,24 +198,24 @@ const QuickSearch = () => {
 
 		entities = !isEmpty(searchResults?.entities)
 			? searchResults?.entities?.map((entityDef: any) => {
-				const { name }: { name: string; found: boolean; key: any } =
-					extractKeyValueFromEntity(entityDef);
-				return {
-					title: `${name}`,
-					parent: entityDef.typeName,
-					types: "Entities",
-					entityObj: entityDef
-				};
-			})
+					const { name }: { name: string; found: boolean; key: any } =
+						extractKeyValueFromEntity(entityDef);
+					return {
+						title: `${name}`,
+						parent: entityDef.typeName,
+						types: "Entities",
+						entityObj: entityDef
+					};
+				})
 			: [{ title: "No Entities Found", types: "Entities" }];
 
 		suggestionNames = !isEmpty(suggestions)
 			? suggestions.map((suggestion: any) => {
-				return {
-					title: `${suggestion}`,
-					types: "Suggestions"
-				};
-			})
+					return {
+						title: `${suggestion}`,
+						types: "Suggestions"
+					};
+				})
 			: [{ title: "No Suggestions Found", types: "Suggestions" }];
 
 		setOptions([...entities, ...suggestionNames] as GlobalOptionRow[]);
@@ -388,7 +388,6 @@ const QuickSearch = () => {
 				className="global-search-stack"
 				alignItems="center"
 				gap="0.5rem"
-				sx={{ minWidth: 0, flexShrink: 1 }}
 			>
 				<FormControl
 					size="small"
@@ -437,8 +436,8 @@ const QuickSearch = () => {
 						disablePortal
 						className="global-search-autocomplete"
 						sx={{
-							minWidth: 150,
-							flex: "1 1 280px",
+							minWidth: 280,
+							flex: 1,
 							"& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
 								backgroundColor: "white"
 							},
@@ -494,14 +493,14 @@ const QuickSearch = () => {
 
 							const { entityObj, types, parent } =
 								typeof option !== "string" &&
-									"entityObj" in option &&
-									"types" in option &&
-									"parent" in option
+								"entityObj" in option &&
+								"types" in option &&
+								"parent" in option
 									? (option as {
-										entityObj: { status?: string; guid?: string };
-										types: string;
-										parent: string;
-									})
+											entityObj: { status?: string; guid?: string };
+											types: string;
+											parent: string;
+										})
 									: { entityObj: null, types: "", parent: "" };
 							const title =
 								typeof option !== "string" && "title" in option
@@ -557,7 +556,7 @@ const QuickSearch = () => {
 											to={{ pathname: href }}
 											color={
 												entityObj?.status &&
-													entityStateReadOnly[entityObj.status]
+												entityStateReadOnly[entityObj.status]
 													? "error"
 													: "primary"
 											}
@@ -567,48 +566,48 @@ const QuickSearch = () => {
 											)}
 											{types === "Entities" && !isEmpty(entityObj)
 												? parts.map((part, index) => (
-													<Stack
-														flexDirection="row"
-														key={index}
-														style={{
-															fontWeight: part.highlight ? "bold" : "regular"
-														}}
-													>
-														{entityObj?.guid !== "-1" && !part.highlight ? (
-															<Link
-																className="entity-name text-blue text-decoration-none"
-																style={{
-																	color: "black",
-																	textDecoration: "none",
-																	maxWidth: "100%",
-																	width: "100%"
-																}}
-																to={{ pathname: href }}
-																color={
-																	entityObj?.status &&
+														<Stack
+															flexDirection="row"
+															key={index}
+															style={{
+																fontWeight: part.highlight ? "bold" : "regular"
+															}}
+														>
+															{entityObj?.guid !== "-1" && !part.highlight ? (
+																<Link
+																	className="entity-name text-blue text-decoration-none"
+																	style={{
+																		color: "black",
+																		textDecoration: "none",
+																		maxWidth: "100%",
+																		width: "100%"
+																	}}
+																	to={{ pathname: href }}
+																	color={
+																		entityObj?.status &&
 																		entityStateReadOnly[entityObj.status]
-																		? "error"
-																		: "primary"
-																}
-															>
-																{part.text}
-															</Link>
-														) : (
-															part.text
-														)}
-													</Stack>
-												))
+																			? "error"
+																			: "primary"
+																	}
+																>
+																	{part.text}
+																</Link>
+															) : (
+																part.text
+															)}
+														</Stack>
+													))
 												: parts.map((part, index) => (
-													<Stack
-														flexDirection="row"
-														key={index}
-														style={{
-															fontWeight: part.highlight ? "bold" : "regular"
-														}}
-													>
-														{part.text}
-													</Stack>
-												))}
+														<Stack
+															flexDirection="row"
+															key={index}
+															style={{
+																fontWeight: part.highlight ? "bold" : "regular"
+															}}
+														>
+															{part.text}
+														</Stack>
+													))}
 											{types === "Entities" &&
 												!isEmpty(entityObj) &&
 												` (${parent})`}

dashboard/src/views/Layout/Header.tsx

@@ -182,14 +182,14 @@ const Header: React.FC<Header> = ({
       )}
       {location.pathname !== "/" &&
         location.pathname !== "/search" && (
-          <div style={{ display: "flex", justifyContent: "center", flex: "1", minWidth: 0, padding: "0 16px" }}>
+          <div style={{ display: "flex", justifyContent: "center", flex: "1" }}>
             <QuickSearch />
           </div>
         )}
       {(location.pathname === "/" || location.pathname === "/search") && (
         <div style={{ flex: "1" }} />
       )}
-      <div className="header-menu" style={{ display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
+      <div className="header-menu" style={{ display: "flex", alignItems: "center", gap: 8 }}>
         <CreateDropdown />
         <LightTooltip title="Downloads">
           <IconButton