Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make search filters scrollable, dont wrap button text

Browse Source
This commit is contained in:
Jackson Harper
2022-04-20 15:47:57 -07:00
parent 119f44dd38
commit 23883b1db5
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View File

@ -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>
)