Polish mobile layout and add collapsible sidebar

job-tracker-ui/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
 
-import { Box, Button, CssBaseline, Typography } from "@mui/material";
+import { Box, Button, CssBaseline, IconButton, Typography } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { CssVarsProvider } from "@mui/material/styles";
 
@@ -99,6 +99,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
   const location = useLocation();
   const navigate = useNavigate();
   const { t } = useI18n();
+  const compactHeaderActions = useMediaQuery("(max-width:767.95px)");
 
   const [addOpen, setAddOpen] = useState(false);
   const [quickOpen, setQuickOpen] = useState(false);
@@ -165,9 +166,35 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
   ];
 
   const rightActions = (
-    <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
-      <Button variant="outlined" startIcon={<SearchIcon />} onClick={() => setQuickOpen(true)}>{t("quickSearch")}</Button>
-      {isJobs ? <Button variant="contained" onClick={() => setAddOpen(true)}>{t("addJob")}</Button> : null}
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        flexWrap: "nowrap",
+        justifyContent: "flex-end",
+        width: { xs: "100%", sm: "auto" },
+        flex: { xs: 1, sm: "0 0 auto" },
+      }}
+    >
+      {compactHeaderActions ? (
+        <IconButton
+          color="secondary"
+          size="small"
+          title={t("quickSearch")}
+          onClick={() => setQuickOpen(true)}
+          sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2.5, width: 42, height: 42, flex: "0 0 auto" }}
+        >
+          <SearchIcon fontSize="small" />
+        </IconButton>
+      ) : (
+        <Button variant="outlined" startIcon={<SearchIcon />} onClick={() => setQuickOpen(true)}>{t("quickSearch")}</Button>
+      )}
+      {isJobs ? (
+        <Button variant="contained" onClick={() => setAddOpen(true)} sx={{ flex: { xs: 1, sm: "0 0 auto" }, minHeight: 42 }}>
+          {t("addJob")}
+        </Button>
+      ) : null}
     </Box>
   );