From 78a37d0e9e20d28f87aa101a3eeecc218f4ec376 Mon Sep 17 00:00:00 2001
From: Catherine Tan <catherine95118@gmail.com>
Date: Mon, 13 Jan 2025 19:36:42 -0800
Subject: [PATCH] add border padding to Filter Dropdowns

---
 app/seasonal-planting-guide/styles.ts       |  4 +--
 components/Buttons.tsx                      |  5 +--
 components/FilterDropdownMultiple/index.tsx | 34 +++++++++++----------
 components/FilterDropdownSingle/index.tsx   | 28 +++++++++--------
 components/FilterDropdownSingle/styles.ts   |  1 +
 5 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts
index 3f55f47..d66d148 100644
--- a/app/seasonal-planting-guide/styles.ts
+++ b/app/seasonal-planting-guide/styles.ts
@@ -22,12 +22,9 @@ export const HeaderContainer = styled.div`
 export const FilterContainer = styled.div`
   display: flex;
   flex-direction: row;
-  white-space: nowrap; // Prevent line break
   gap: 8px;
   margin-top: 12px;
   margin-bottom: 20px;
-  padding-top: 1px;
-  padding-bottom: 1px; // ensure filter border isn't cut off
   position: relative;
   overflow-x: auto;
   align-items: center;
@@ -55,4 +52,5 @@ export const VerticalSeparator = styled.div`
   height: 30px;
   width: 1px;
   background-color: ${COLORS.lightgray};
+  flex-shrink: 0;
 `;
diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index aa07141..d13ecbb 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -78,7 +78,8 @@ export const SmallButton = styled(P3).attrs({ as: 'button' })<ButtonProps>`
   ${ButtonStyles}
   // Unique to Small Button 
   border-radius: 20px;
+  height: 24px;
   min-width: 60px;
-  min-height: 24px; // to prevent Clear Filters text overflow
-  padding: 4px 10px;
+  flex-shrink: 0; // to prevent Clear Filters from collapsing on overflow
+  padding: 4px 8px;
 `;
diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx
index f6f6e66..38acadb 100644
--- a/components/FilterDropdownMultiple/index.tsx
+++ b/components/FilterDropdownMultiple/index.tsx
@@ -83,21 +83,23 @@ export default function FilterDropdownMultiple<T>({
   };
 
   return (
-    <Select
-      options={options}
-      isMulti
-      value={value}
-      isDisabled={disabled}
-      placeholder={placeholder}
-      onChange={handleChange}
-      closeMenuOnSelect={false}
-      styles={customSelectStyles<T>()}
-      isSearchable={false}
-      hideSelectedOptions={false}
-      // use custom styled components instead of default components
-      components={{ MultiValue: CustomMultiValue, Option: CustomOption }}
-      menuPosition="fixed"
-      instanceId="dropdown-multiple"
-    />
+    <div style={{ padding: '1px' }}>
+      <Select
+        options={options}
+        isMulti
+        value={value}
+        isDisabled={disabled}
+        placeholder={placeholder}
+        onChange={handleChange}
+        closeMenuOnSelect={false}
+        styles={customSelectStyles<T>()}
+        isSearchable={false}
+        hideSelectedOptions={false}
+        // use custom styled components instead of default components
+        components={{ MultiValue: CustomMultiValue, Option: CustomOption }}
+        menuPosition="fixed"
+        instanceId="dropdown-multiple"
+      />
+    </div>
   );
 }
diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx
index 88648c0..019682c 100644
--- a/components/FilterDropdownSingle/index.tsx
+++ b/components/FilterDropdownSingle/index.tsx
@@ -35,18 +35,20 @@ export default function FilterDropdownSingle<T>({
   };
 
   return (
-    <Select
-      options={options}
-      value={value}
-      isDisabled={disabled}
-      placeholder={placeholder}
-      onChange={handleChange}
-      closeMenuOnSelect={false}
-      styles={customSelectStyles<T>(small)}
-      isSearchable={false}
-      hideSelectedOptions={false}
-      menuPosition="fixed"
-      instanceId="dropdown-single"
-    />
+    <div style={{ padding: '1px' }}>
+      <Select
+        options={options}
+        value={value}
+        isDisabled={disabled}
+        placeholder={placeholder}
+        onChange={handleChange}
+        closeMenuOnSelect={false}
+        styles={customSelectStyles<T>(small)}
+        isSearchable={false}
+        hideSelectedOptions={false}
+        menuPosition="fixed"
+        instanceId="dropdown-single"
+      />
+    </div>
   );
 }
diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts
index 7b449ea..2ca3b25 100644
--- a/components/FilterDropdownSingle/styles.ts
+++ b/components/FilterDropdownSingle/styles.ts
@@ -34,6 +34,7 @@ export const customSelectStyles = <T>(
         : '#fff',
     padding: '8px 14px',
     minWidth: $isSmall ? '93px' : '150px',
+    width: 'max-content',
   }),
   // placeholder text
   placeholder: baseStyles => ({