make more responsive

392-f24 · Nov 7, 2024 · c35e0c3 · c35e0c3
1 parent 4a81932
commit c35e0c3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/components/Home/Task.jsx b/src/components/Home/Task.jsx
@@ -35,7 +35,14 @@ const Task = ({
       />
       <ListItemText
         primary={
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: ['column', 'row'],
+              alignItems: ['baseline', 'center'],
+              gap: '0.5rem',
+            }}
+          >
             {task.name}
             {task.due != undefined ? (
               <Chip

diff --git a/src/utils/theme.js b/src/utils/theme.js
@@ -17,4 +17,13 @@ export const theme = createTheme({
   typography: {
     fontFamily: 'Roboto, sans-serif',
   },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
 })