prevent whitespace collapse in filter text

app/seasonal-planting-guide/page.tsx

@@ -8,7 +8,7 @@ import { PlantCalendarList } from '@/components/PlantCalendarList';
 import SearchBar from '@/components/SearchBar';
 import SeasonColorKey from '@/components/SeasonColorKey';
 import COLORS from '@/styles/colors';
-import { Box, Flex } from '@/styles/containers';
+import { Box } from '@/styles/containers';
 import { H1, H3 } from '@/styles/text';
 import { DropdownOption, PlantingTypeEnum, SeasonEnum } from '@/types/schema';
 import {
@@ -123,9 +123,7 @@ export default function SeasonalPlantingGuide() {
         </StateOptionsContainer>
       ) : (
         <Box $p="20px">
-          <Flex $direction="row" $justify="center">
-            <SeasonColorKey />
-          </Flex>
+          <SeasonColorKey />
           <PlantCalendarList
             growingSeasonFilterValue={selectedGrowingSeason}
             harvestSeasonFilterValue={selectedHarvestSeason}

app/seasonal-planting-guide/styles.ts

@@ -11,7 +11,7 @@ export const PageContainer = styled.div`
 export const HeaderContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 2px 24px 20px 24px;
+  padding: 2px 24px 0 24px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
   background-color: #fff;
   position: relative;
@@ -22,8 +22,12 @@ 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;

components/Buttons.tsx

@@ -79,6 +79,6 @@ export const SmallButton = styled(P3).attrs({ as: 'button' })<ButtonProps>`
   // Unique to Small Button 
   border-radius: 20px;
   min-width: 60px;
-  height: 24px;
+  min-height: 24px; // to prevent Clear Filters text overflow
   padding: 4px 10px;
 `;