joelson
/
Portalweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

fix(ui): improve searchbar responsiveness on mobile #7

Merged
joelson merged 2 commits from fix/searchbar-mobile-layout into master 2026-01-15 20:51:31 +00:00
Conversation 0 Commits 2 Files Changed 1 +9 -6
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/features/orders/components/SearchBar.tsx
View File

@ -257,7 +257,7 @@ export const SearchBar = () => {
{/* Datas */} {/* Datas */}
<Grid size={{ xs: 12, sm: 12, md: 5 }}> <Grid size={{ xs: 12, sm: 12, md: 5 }}>
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="pt-br"> <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="pt-br">
<Box display="flex" gap={1.5}> <Box display="flex" gap={1.5} sx={{ flexDirection: { xs: 'column', sm: 'row' } }}>
<DatePicker <DatePicker
label="Data Inicial" label="Data Inicial"
value={localFilters.createDateIni ? moment(localFilters.createDateIni, 'YYYY-MM-DD') : null} value={localFilters.createDateIni ? moment(localFilters.createDateIni, 'YYYY-MM-DD') : null}
@ -298,26 +298,28 @@ export const SearchBar = () => {
</Grid> </Grid>
{/* Ações */} {/* Ações */}
<Grid size={{ xs: 12, md: 5 }} sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}> <Grid size={{ xs: 12, md: 5 }} sx={{ display: 'flex', justifyContent: { xs: 'space-between', md: 'flex-end' }, flexDirection: { xs: 'column', sm: 'row' }, gap: 1 }}>
<Button <Button
variant="outlined" variant="outlined"
color="inherit" color="inherit"
size="small" size="small"
onClick={handleReset} onClick={handleReset}
startIcon={<ResetIcon />} startIcon={<ResetIcon />}
sx={{ textTransform: 'none', minWidth: 90 }} fullWidth
sx={{ textTransform: 'none', minWidth: { xs: '100%', sm: 90 } }}
> >
Limpar Limpar
</Button> </Button>
<Badge badgeContent={activeDrawerFiltersCount} color="primary"> <Badge badgeContent={activeDrawerFiltersCount} color="primary" sx={{ width: { xs: '100%', sm: 'auto' } }}>
<Button <Button
variant="outlined" variant="outlined"
color="primary" color="primary"
size="small" size="small"
onClick={toggleDrawer(true)} onClick={toggleDrawer(true)}
startIcon={<TuneIcon />} startIcon={<TuneIcon />}
sx={{ textTransform: 'none', minWidth: 100 }} fullWidth
sx={{ textTransform: 'none', minWidth: { xs: '100%', sm: 100 } }}
> >
Filtros Filtros
</Button> </Button>
@ -330,7 +332,8 @@ export const SearchBar = () => {
onClick={handleFilter} onClick={handleFilter}
disabled={!isDateValid || !!dateError || isFetching} disabled={!isDateValid || !!dateError || isFetching}
startIcon={isFetching ? <CircularProgress size={16} color="inherit" /> : <SearchIcon />} startIcon={isFetching ? <CircularProgress size={16} color="inherit" /> : <SearchIcon />}
sx={{ textTransform: 'none', minWidth: 100 }} fullWidth
sx={{ textTransform: 'none', minWidth: { xs: '100%', sm: 100 } }}
> >
Buscar Buscar
</Button> </Button>