From 9f0d7ee70a7c19918f63d201015bc07751965982 Mon Sep 17 00:00:00 2001
From: Slawomir Koszewski <slawek@koszewscy.waw.pl>
Date: Sat, 31 Jan 2026 15:57:37 +0100
Subject: [PATCH] Refined control sizes.

---
 src/components/ApiKeyPage.jsx |  1 +
 src/components/Header.jsx     |  2 +-
 src/components/MainPage.jsx   | 48 ++++++++++++++++++++---------------
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/ApiKeyPage.jsx b/src/components/ApiKeyPage.jsx
index a1484cb..1fcb654 100644
--- a/src/components/ApiKeyPage.jsx
+++ b/src/components/ApiKeyPage.jsx
@@ -163,6 +163,7 @@ function ApiKeyPage({
                   exclusive
                   onChange={(e, value) => value && onShellTypeChange(value)}
                   aria-label="shell type"
+                  sx={{ "& .MuiToggleButton-root": { px: 2, py: 0.5 } }}
                 >
                   <ToggleButton value="bash">UNIX (Bash)</ToggleButton>
                   <ToggleButton value="powershell">Windows (PS)</ToggleButton>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 9b8502c..376a67e 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -25,7 +25,7 @@ function Header({ theme, onThemeChange, currentPage, onPageChange }) {
           {/* Brand/Title */}
           <Box sx={{ display: "flex", alignItems: "center" }}>
             <Typography
-              variant="h6"
+              variant="h5"
               noWrap
               component="div"
               sx={{
diff --git a/src/components/MainPage.jsx b/src/components/MainPage.jsx
index 68ab116..449d13b 100644
--- a/src/components/MainPage.jsx
+++ b/src/components/MainPage.jsx
@@ -216,17 +216,21 @@ function MainPage({
           mb: 1,
           flexShrink: 0,
           bgcolor: "background.paper",
-          p: 1.25,
           border: 1,
           borderColor: "divider",
+          overflow: "hidden",
         }}
       >
         <Box
           sx={{
+            px: 2,
+            py: 1,
+            bgcolor: "action.hover",
+            borderBottom: 1,
+            borderColor: "divider",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            mb: 0.75,
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
@@ -236,25 +240,27 @@ function MainPage({
             </Typography>
           </Box>
         </Box>
-        <TextField
-          fullWidth
-          size="small"
-          placeholder="Enter JMESPath expression (e.g., people[*].name)"
-          value={jmespathExpression}
-          onChange={handleJmespathChange}
-          error={!!error}
-          helperText={error || " "}
-          sx={{
-            "& .MuiInputBase-root": {
-              fontFamily: "'Noto Sans Mono', monospace",
-              fontSize: "0.9rem",
-            },
-            "& .MuiFormHelperText-root": {
-              mt: 0.75,
-              mb: -0.5,
-            },
-          }}
-        />
+        <Box sx={{ p: 1.5 }}>
+          <TextField
+            fullWidth
+            size="small"
+            placeholder="Enter JMESPath expression (e.g., people[*].name)"
+            value={jmespathExpression}
+            onChange={handleJmespathChange}
+            error={!!error}
+            helperText={error || " "}
+            sx={{
+              "& .MuiInputBase-root": {
+                fontFamily: "'Noto Sans Mono', monospace",
+                fontSize: "0.9rem",
+              },
+              "& .MuiFormHelperText-root": {
+                mt: 0.75,
+                mb: -0.5,
+              },
+            }}
+          />
+        </Box>
       </Paper>
 
       <Grid container spacing={3} sx={{ flex: "1 1 0", minHeight: 0, height: 0 }}>