From 0787506dfbc12fbd71f90ddc7d0969fdb20ab732 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 20 Sep 2023 00:14:21 +0300
Subject: [PATCH] fix: fix height issue on the topology filter bar

---
 .../Dropdown/ComponentTypesDropdown/index.tsx  |  4 ++--
 .../TopologyFilters/TopologyFilterBar.tsx      | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Dropdown/ComponentTypesDropdown/index.tsx b/src/components/Dropdown/ComponentTypesDropdown/index.tsx
index ab357349b..167a9e305 100644
--- a/src/components/Dropdown/ComponentTypesDropdown/index.tsx
+++ b/src/components/Dropdown/ComponentTypesDropdown/index.tsx
@@ -18,9 +18,9 @@ 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"
@@ -28,7 +28,7 @@ export function ComponentTypesDropdown({
           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
index 68401b3cc..2e10a3036 100644
--- 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({