Merge pull request 'fix(ui): improve searchbar responsiveness on mobile' (#7) from fix/searchbar-mobile-layout into master

Reviewed-on: #7

src/features/orders/components/SearchBar.tsx

@@ -257,7 +257,7 @@ export const SearchBar = () => {
         {/* Datas */}
         <Grid size={{ xs: 12, sm: 12, md: 5 }}>
           <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
                 label="Data Inicial"
                 value={localFilters.createDateIni ? moment(localFilters.createDateIni, 'YYYY-MM-DD') : null}
@@ -298,26 +298,28 @@ export const SearchBar = () => {
         </Grid>
 
         {/* 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
             variant="outlined"
             color="inherit"
             size="small"
             onClick={handleReset}
             startIcon={<ResetIcon />}
-            sx={{ textTransform: 'none', minWidth: 90 }}
+            fullWidth
+            sx={{ textTransform: 'none', minWidth: { xs: '100%', sm: 90 } }}
           >
             Limpar
           </Button>
 
-          <Badge badgeContent={activeDrawerFiltersCount} color="primary">
+          <Badge badgeContent={activeDrawerFiltersCount} color="primary" sx={{ width: { xs: '100%', sm: 'auto' } }}>
             <Button
               variant="outlined"
               color="primary"
               size="small"
               onClick={toggleDrawer(true)}
               startIcon={<TuneIcon />}
-              sx={{ textTransform: 'none', minWidth: 100 }}
+              fullWidth
+              sx={{ textTransform: 'none', minWidth: { xs: '100%', sm: 100 } }}
             >
               Filtros
             </Button>
@@ -330,7 +332,8 @@ export const SearchBar = () => {
             onClick={handleFilter}
             disabled={!isDateValid || !!dateError || isFetching}
             startIcon={isFetching ? <CircularProgress size={16} color="inherit" /> : <SearchIcon />}
-            sx={{ textTransform: 'none', minWidth: 100 }}
+            fullWidth
+            sx={{ textTransform: 'none', minWidth: { xs: '100%', sm: 100 } }}
           >
             Buscar
           </Button>