Optimize mobile layout

Author: pieperm

web-ui/src/pages/SkillCategoriesPage.css

@@ -1,14 +1,51 @@
-.skill-categories-header {
+.SkillCategoriesPage-root .skill-categories-header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     margin-bottom: 1rem;
     flex-wrap: wrap;
 }
 
-.skill-categories-actions {
+.SkillCategoriesPage-root .skill-categories-actions {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+@media screen and (max-width: 600px) {
+    .SkillCategoriesPage-root .skill-categories-header {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .SkillCategoriesPage-root .skill-categories-actions {
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 1fr 150px;
+    }
+
+    .SkillCategoriesPage-root .skill-categories-actions .search-skill-categories-field {
+        grid-row: 1;
+        grid-column: 1;
+    }
+
+    .SkillCategoriesPage-root .skill-categories-actions .download-skills-button {
+        grid-row: 1;
+        grid-column: 2;
+        justify-self: center;
+    }
+
+    .SkillCategoriesPage-root .skill-categories-actions .filter-skill-categories-field {
+        grid-row: 2;
+        grid-column: 1;
+    }
+
+    .SkillCategoriesPage-root .skill-categories-actions .new-skill-category-button {
+        grid-row: 2;
+        grid-column: 2;
+    }
 }

web-ui/src/pages/SkillCategoriesPage.jsx

@@ -162,15 +162,15 @@ const SkillCategoriesPage = () => {
       <div className="skill-categories-header">
         <Typography variant="h4">Skill Categories</Typography>
         <div className="skill-categories-actions">
-          <Tooltip title="Download Skills" arrow>
+          <Tooltip className="download-skills-button" title="Download Skills" arrow>
             <IconButton onClick={downloadSkills}>
               <DownloadIcon/>
             </IconButton>
           </Tooltip>
           <TextField
-            style={{ minWidth: "200px" }}
+            className="search-skill-categories-field"
+            style={{ width: "auto", minWidth: "200px", maxWidth: "300px" }}
             label="Search"
-            fullWidth
             placeholder="Category name"
             variant="outlined"
             size="small"
@@ -181,15 +181,15 @@ const SkillCategoriesPage = () => {
             }}
           />
           <Autocomplete
+            className="filter-skill-categories-field"
             renderInput={(params) => (
               <TextField
                 {...params}
-                style={{ minWidth: "200px" }}
+                style={{ minWidth: "200px", maxWidth: "300px" }}
                 label="Filter by Skill"
                 variant="outlined"
                 size="small"
                 placeholder="Skill name"
-                fullWidth
               />
             )}
             options={skills}
@@ -199,7 +199,8 @@ const SkillCategoriesPage = () => {
             onChange={(_, newValue) => setSkillFilter(newValue)}
           />
           <Button
-            style={{ width: "300px" }}
+            className="new-skill-category-button"
+            style={{ whiteSpace: "nowrap" }}
             variant="contained"
             onClick={() => setDialogOpen(true)}
           >

web-ui/src/pages/SkillCategoryEditPage.css

@@ -0,0 +1,16 @@
+.SkillCategoryEditPage-root .edit-skill-category-fields {
+    margin: 2rem 0;
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+}
+
+@media screen and (max-width: 600px) {
+
+    .SkillCategoryEditPage-root .edit-skill-category-fields {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+}

web-ui/src/pages/SkillCategoryEditPage.jsx

@@ -28,6 +28,8 @@ import SelectSkillsDialog from "../components/select-skills-dialog/SelectSkillsD
 import {UPDATE_TOAST} from "../context/actions";
 import Dialog from "@mui/material/Dialog";
 
+import "./SkillCategoryEditPage.css";
+
 const PREFIX = 'SkillCategoryEditPage';
 const classes = {
   root: `${PREFIX}-root`,
@@ -152,12 +154,11 @@ const SkillCategoryEditPage = () => {
 
   return (
     <Root className={classes.root}>
-      <div>
-        <Typography variant="h4">Edit Skill Category</Typography>
-      </div>
-      <div style={{ margin: "2rem 0", display: "flex", gap: "2rem" }}>
+      <Typography variant="h4">Edit Skill Category</Typography>
+      <div className="edit-skill-category-fields">
         <TextField
           label="Name"
+          style={{ width: "250px" }}
           value={category ? category.name : ""}
           onChange={(event) => {
             setCategory({
@@ -169,6 +170,7 @@ const SkillCategoryEditPage = () => {
         />
         <TextField
           label="Description"
+          style={{ width: "400px" }}
           value={category ? category.description : ""}
           onChange={(event) => {
             setCategory({