ui fixes for filtering

src/Dashboard.tsx

@@ -101,36 +101,63 @@ 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">
-        <Autocomplete
-          multiple
-          freeSolo
-          options={loadedPayees}
-          value={payeeInput}
-          onChange={(_, val) => setPayeeInput(val as string[])}
-          renderInput={(params) => <TextField {...params} label="Filter by Payee" size="small" />}
-          sx={{ minWidth: 250, flex: 1 }}
-        />
-        <Autocomplete
-          multiple
-          freeSolo
-          options={loadedTags}
-          value={tagsInput}
-          onChange={(_, val) => setTagsInput(val as string[])}
-          renderInput={(params) => <TextField {...params} label="Filter by Tags" size="small" />}
-          sx={{ minWidth: 250, flex: 1 }}
-        />
-        <Button 
-          variant="contained" 
-          onClick={() => {
-            setAppliedPayees(payeeInput);
-            setAppliedTags(tagsInput);
-          }}
-          disabled={isLoading}
+      <Container>
+        <Paper 
+          sx={{ 
+            mt: 4, 
+            p: 2, 
+            display: "flex", 
+            flexDirection: { xs: "column", sm: "row" },
+            gap: 2, 
+            alignItems: { xs: "stretch", sm: "flex-end" }, 
+            borderRadius: 4,
+            mb: -2 // pull up to be closer to the dashboard container below
+          }} 
+          elevation={0} 
+          variant="outlined"
         >
-          Apply
-        </Button>
-      </Paper>
+          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
+            <Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
+              Filter by Payee
+            </Box>
+            <Autocomplete
+              multiple
+              freeSolo
+              options={loadedPayees}
+              value={payeeInput}
+              onChange={(_, val) => setPayeeInput(val as string[])}
+              renderInput={(params) => <TextField {...params} placeholder="Add payees..." />}
+              sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
+            />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
+            <Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
+              Filter by Tags
+            </Box>
+            <Autocomplete
+              multiple
+              freeSolo
+              options={loadedTags}
+              value={tagsInput}
+              onChange={(_, val) => setTagsInput(val as string[])}
+              renderInput={(params) => <TextField {...params} placeholder="Add tags..." />}
+              sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
+            />
+          </Box>
+          <Button 
+            variant="contained" 
+            size="large"
+            onClick={() => {
+              setAppliedPayees(payeeInput);
+              setAppliedTags(tagsInput);
+            }}
+            disabled={isLoading}
+            sx={{ height: 40, borderRadius: 2 }} // Changed from 56 to 40 to match minHeight of inputs
+          >
+            Apply
+          </Button>
+        </Paper>
+      </Container>
       <ConfigurableDashboard
         config={configuration}
         data={data}