fix: fix height issue on the topology filter bar

flanksource · Oct 12, 2023 · 0787506 · 0787506
1 parent ce35c25
commit 0787506
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Dropdown/ComponentTypesDropdown/index.tsx b/src/components/Dropdown/ComponentTypesDropdown/index.tsx
@@ -18,17 +18,17 @@ export function ComponentTypesDropdown({
   return (
     <div className={className} {...rest}>
       <ReactSelectDropdown
-        label={label}
         name={name}
         value={value}
+        label=""
         items={topologyTypes}
         className="inline-block p-3 w-auto max-w-[500px]"
         dropDownClassNames="w-auto max-w-[400px] left-0"
         onChange={(val: any) => {
           onChange(val);
         }}
         prefix={
-          <div className="text-sm text-gray-500 mr-2 whitespace-nowrap">
+          <div className="text-xs text-gray-500 mr-2 whitespace-nowrap">
             {`${name}:`}
           </div>
         }

diff --git a/src/components/TopologyFilters/TopologyFilterBar.tsx b/src/components/TopologyFilters/TopologyFilterBar.tsx
@@ -73,14 +73,14 @@ export default function TopologyFilterBar({
 
   return (
     <div className="flex px-6">
-      <div className="flex flex-wrap">
-        <div className="flex p-3 pl-0">
+      <div className="flex gap-2 py-3 flex-wrap">
+        <div className="flex">
           <ReactSelectDropdown
             name="health"
             label=""
             value={healthStatus}
             items={healthStatuses}
-            className="inline-block p-3 w-auto max-w-[500px]"
+            className="inline-block w-auto max-w-[500px]"
             dropDownClassNames="w-auto max-w-[400px] left-0"
             onChange={(val: any) => {
               setSearchParams({
@@ -96,7 +96,7 @@ export default function TopologyFilterBar({
           />
         </div>
         <ComponentTypesDropdown
-          className="flex p-3"
+          className="flex"
           name="Types"
           label=""
           topologyTypes={topologyTypes}
@@ -108,13 +108,13 @@ export default function TopologyFilterBar({
             });
           }}
         />
-        <div className="flex p-3">
+        <div className="flex">
           <ReactSelectDropdown
             name="team"
             label=""
             value={team}
             items={teams}
-            className="inline-block p-3 w-auto max-w-[500px]"
+            className="inline-block w-auto max-w-[500px]"
             dropDownClassNames="w-auto max-w-[400px] left-0"
             onChange={(val: any) => {
               setSearchParams({
@@ -132,7 +132,7 @@ export default function TopologyFilterBar({
         <ComponentLabelsDropdown
           name="Labels"
           label=""
-          className="flex p-3 w-auto max-w-[500px]"
+          className="flex w-auto max-w-[500px]"
           value={selectedLabel}
           onChange={(val: any) => {
             setSearchParams({
@@ -141,11 +141,11 @@ export default function TopologyFilterBar({
             });
           }}
         />
-        <div className="flex p-3">
+        <div className="flex">
           <AgentNamesDropdown
             name="agent_id"
             value={agentId}
-            className="inline-block p-3 w-auto max-w-[500px]"
+            className="inline-block w-auto max-w-[500px]"
             dropDownClassNames="w-auto max-w-[400px] left-0"
             onChange={(val: any) => {
               setSearchParams({