uix fixes for filtering

src/Dashboard.tsx

@@ -101,15 +101,29 @@ export default function Dashboard() {
   const data = prepareReport(report.data.data);
   return (
     <Box>
-      <Paper sx={{ m: 2, p: 2, display: "flex", gap: 2, alignItems: "center" }} elevation={0} variant="outlined">
+      <Container>
+        <Paper 
+          sx={{ 
+            mt: 4, 
+            p: 2, 
+            display: "flex", 
+            flexDirection: { xs: "column", sm: "row" },
+            gap: 2, 
+            alignItems: { xs: "stretch", sm: "center" }, 
+            borderRadius: 4,
+            mb: -2 // pull up to be closer to the dashboard container below
+          }} 
+          elevation={0} 
+          variant="outlined"
+        >
           <Autocomplete
             multiple
             freeSolo
             options={loadedPayees}
             value={payeeInput}
             onChange={(_, val) => setPayeeInput(val as string[])}
-          renderInput={(params) => <TextField {...params} label="Filter by Payee" size="small" />}
+            renderInput={(params) => <TextField {...params} label="Filter by Payee" />}
-          sx={{ minWidth: 250, flex: 1 }}
+            sx={{ minWidth: { sm: 250 }, flex: 1 }}
           />
           <Autocomplete
             multiple
@@ -117,20 +131,23 @@ export default function Dashboard() {
             options={loadedTags}
             value={tagsInput}
             onChange={(_, val) => setTagsInput(val as string[])}
-          renderInput={(params) => <TextField {...params} label="Filter by Tags" size="small" />}
+            renderInput={(params) => <TextField {...params} label="Filter by Tags" />}
-          sx={{ minWidth: 250, flex: 1 }}
+            sx={{ minWidth: { sm: 250 }, flex: 1 }}
           />
           <Button 
             variant="contained" 
+            size="large"
             onClick={() => {
               setAppliedPayees(payeeInput);
               setAppliedTags(tagsInput);
             }}
             disabled={isLoading}
+            sx={{ height: 56, borderRadius: 2 }}
           >
             Apply
           </Button>
         </Paper>
+      </Container>
       <ConfigurableDashboard
         config={configuration}
         data={data}