Resized JMESPath Expression area.

src/components/MainPage.jsx

@@ -213,10 +213,10 @@ function MainPage({
 
       <Paper
         sx={{
-          mb: 3,
+          mb: 1,
           flexShrink: 0,
           bgcolor: "background.paper",
-          p: 3,
+          p: 1.25,
           border: 1,
           borderColor: "divider",
         }}
@@ -226,18 +226,19 @@ function MainPage({
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            mb: 2,
+            mb: 0.75,
           }}
         >
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-            <SearchIcon sx={{ fontSize: 24 }} color="primary" />
+            <SearchIcon sx={{ fontSize: 20 }} color="primary" />
-            <Typography variant="h6" fontWeight="600">
+            <Typography variant="subtitle2" color="text.primary">
               JMESPath Expression
             </Typography>
           </Box>
         </Box>
         <TextField
           fullWidth
+          size="small"
           placeholder="Enter JMESPath expression (e.g., people[*].name)"
           value={jmespathExpression}
           onChange={handleJmespathChange}
@@ -246,7 +247,11 @@ function MainPage({
           sx={{
             "& .MuiInputBase-root": {
               fontFamily: "'Noto Sans Mono', monospace",
-              fontSize: "1.1rem",
+              fontSize: "0.9rem",
+            },
+            "& .MuiFormHelperText-root": {
+              mt: 0.75,
+              mb: -0.5,
             },
           }}
         />
@@ -269,7 +274,7 @@ function MainPage({
             <Box
               sx={{
                 px: 2,
-                py: 1.5,
+                py: 1,
                 bgcolor: "action.hover",
                 borderBottom: 1,
                 borderColor: "divider",
@@ -426,7 +431,7 @@ function MainPage({
             <Box
               sx={{
                 px: 2,
-                py: 1.5,
+                py: 1,
                 bgcolor: "action.hover",
                 borderBottom: 1,
                 borderColor: "divider",