From 23883b1db55606df2bf734285b7aaa2ee2098221 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 20 Apr 2022 15:47:57 -0700
Subject: [PATCH] Make search filters scrollable, dont wrap button text

---
 .../components/templates/homeFeed/HomeFeedContainer.tsx   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index d69452f05..c8dfb20f4 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -587,12 +587,16 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           applySearchQuery={props.applySearchQuery}
         />
         {viewerData?.me && isVipUser(viewerData?.me) && (
-          <Box css={{ display: 'flex', width: '100%', height: '44px', marginTop: '16px', gap: '8px', flexDirection: 'row' }}>
+          <Box css={{ display: 'flex', width: '100%', height: '44px', marginTop: '16px', gap: '8px', flexDirection: 'row', overflowY: 'scroll', scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            }
+          }}>
             {Object.keys(SAVED_SEARCHES).map(key => {
               const searchQuery = SAVED_SEARCHES[key]
               const style = searchQuery === props.searchTerm || (!props.searchTerm && !searchQuery) ? 'ctaDarkYellow' : 'ctaLightGray'
               return (
-                <Button key={key} style={style} onClick={() => { props.applySearchQuery(searchQuery)}} css={{ p: '10px 12px', borderRadius: '6px' }}>
+                <Button key={key} style={style} onClick={() => { props.applySearchQuery(searchQuery)}} css={{ p: '10px 12px', borderRadius: '6px', whiteSpace: 'nowrap' }}>
                   {key}
                 </Button>
               )