Votes page: adjust filter positions on layout

Author: csillag

.changelog/1994.trivial.md

@@ -0,0 +1 @@
+Votes page: adjust filter positions

src/app/components/Proposals/VoteTypeFilter.tsx

@@ -6,6 +6,7 @@ import { FilterButtons } from '../FilterButtons'
 type VoteTypeFilterProps = {
   onSelect: (voteType: VoteType) => void
   value?: VoteType
+  fullWidth?: boolean
 }
 
 export const VoteTypeFilter: FC<VoteTypeFilterProps> = props => {

src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx

@@ -16,6 +16,7 @@ import { ErrorBoundary } from '../../components/ErrorBoundary'
 import Box from '@mui/material/Box'
 import { NoMatchingDataMaybeClearFilters, TableSearchBar } from '../../components/Search/TableSearchBar'
 import { CardEmptyState } from '../../components/CardEmptyState'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 type ProposalVotesProps = {
   isLoading: boolean
@@ -115,21 +116,31 @@ export const ProposalVotesView: FC = () => {
 
 export const ProposalVotesCard: FC = () => {
   const { t } = useTranslation()
+  const { isMobile, isTablet } = useScreenSize()
 
   const { wantedType, setWantedType, wantedNameInput, setWantedNameInput, nameError } = useVoteFiltering()
 
   return (
     <SubPageCard>
       <CardHeaderWithResponsiveActions
         action={
-          <Box sx={{ display: 'inline-flex', gap: 5 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexWrap: isTablet ? 'wrap' : 'nowrap',
+              gap: 4,
+              paddingRight: isMobile ? 4 : 0,
+            }}
+          >
+            <VoteTypeFilter onSelect={setWantedType} value={wantedType} />
             <TableSearchBar
               value={wantedNameInput}
               onChange={setWantedNameInput}
               placeholder={t('networkProposal.searchForVoter')}
               warning={nameError}
+              fullWidth={isTablet}
             />
-            <VoteTypeFilter onSelect={setWantedType} value={wantedType} />
           </Box>
         }
         disableTypography