From 9a57cb44eed69a04f4e719da5759581336f0dc88 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sun, 10 May 2026 20:04:52 +0530
Subject: [PATCH] ui fixes for filtering

---
 src/Dashboard.tsx | 50 ++++++++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
index 2354645..1e5cecf 100644
--- a/src/Dashboard.tsx
+++ b/src/Dashboard.tsx
@@ -109,31 +109,41 @@ export default function Dashboard() {
             display: "flex", 
             flexDirection: { xs: "column", sm: "row" },
             gap: 2, 
-            alignItems: { xs: "stretch", sm: "center" }, 
+            alignItems: { xs: "stretch", sm: "flex-end" }, 
             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" />}
-            sx={{ minWidth: { sm: 250 }, flex: 1 }}
-          />
-          <Autocomplete
-            multiple
-            freeSolo
-            options={loadedTags}
-            value={tagsInput}
-            onChange={(_, val) => setTagsInput(val as string[])}
-            renderInput={(params) => <TextField {...params} label="Filter by Tags" />}
-            sx={{ minWidth: { sm: 250 }, flex: 1 }}
-          />
+          <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"
@@ -142,7 +152,7 @@ export default function Dashboard() {
               setAppliedTags(tagsInput);
             }}
             disabled={isLoading}
-            sx={{ height: 56, borderRadius: 2 }}
+            sx={{ height: 40, borderRadius: 2 }} // Changed from 56 to 40 to match minHeight of inputs
           >
             Apply
           </Button>