danielway · danielway · Nov 17, 2025 · Nov 15, 2025 · Nov 16, 2025
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,29 +1,28 @@
-import { AppBar, Box, Toolbar, Typography, styled } from '@mui/material';
+import { AppBar, Toolbar, Typography } from '@mui/material';
 import { DatePicker } from './DatePicker';
 
 export const Header = () => {
   return (
     <AppBar position="static">
-      <Toolbar>
-        <AppTitle variant="h5">Task Timer</AppTitle>
-        <DatePickerBox>
-          <DatePicker />
-        </DatePickerBox>
+      <Toolbar
+        sx={{
+          flexDirection: { xs: 'column', sm: 'row' },
+          py: { xs: 1, sm: 0 },
+        }}
+      >
+        <Typography
+          variant="h5"
+          sx={{
+            flexGrow: 1,
+            fontWeight: 'bold',
+            fontSize: { xs: '1.25rem', sm: '1.5rem' },
+            mb: { xs: 1, sm: 0 },
+          }}
+        >
+          Task Timer
+        </Typography>
+        <DatePicker />
       </Toolbar>
     </AppBar>
   );
 };
-
-const AppTitle = styled(Typography)(() => ({
-  flexGrow: 1,
-  fontWeight: 'bold',
-}));
-
-const DatePickerBox = styled(Box)`
-  ${(props) => props.theme.breakpoints.up('xs')} {
-    display: none;
-  }
-  ${(props) => props.theme.breakpoints.up('sm')} {
-    display: block;
-  }
-`;
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -26,7 +26,13 @@ export const Layout = (props: LayoutProps) => {
       <CssBaseline />
       <Header />
       <Container>
-        <Box p="20px">{props.children}</Box>
+        <Box
+          sx={{
+            p: { xs: 1, sm: 2, md: 2.5 },
+          }}
+        >
+          {props.children}
+        </Box>
         <Footer />
       </Container>
     </ThemeProvider>

diff --git a/src/components/layout/Table.tsx b/src/components/layout/Table.tsx
@@ -49,14 +49,19 @@ export const Table = () => {
     <TableContainer
       component={Paper}
       ref={tableRef}
-      style={{ marginBottom: '10px', position: 'relative' }}
+      sx={{
+        mb: { xs: 1, sm: 1.25 },
+        position: 'relative',
+        overflowX: 'auto',
+        WebkitOverflowScrolling: 'touch',
+      }}
     >
       <TimeCursor
         hoursPositionLeft={hoursPosition?.hoursLeftPosition}
         hoursPositionRight={hoursPosition?.hoursRightPosition}
         hoursHeight={timeHeight}
       />
-      <MuiTable size="small">
+      <MuiTable size="small" sx={{ minWidth: { xs: 800, sm: 'auto' } }}>
         <TableHead>
           <TableRow>
             <TableCell className="icon" />

diff --git a/src/components/task/TaskCreationRow.tsx b/src/components/task/TaskCreationRow.tsx
@@ -6,6 +6,7 @@ import {
   TableCell,
   Select,
   MenuItem,
+  Box,
 } from '@mui/material';
 import { TimeSummaryCell } from '../time/TimeSummaryCell';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
@@ -14,7 +15,7 @@ import { type TaskTime, getTimesForDate } from '../../app/slices/timeSlice';
 import { getSelectedDate } from '../../app/slices/appSlice';
 import { addTaskToDate } from '../../app/slices/dateSlice';
 import { DEFAULT_TASK_TYPES } from '../../types/taskTypes';
-import { MAX_TASK_DESCRIPTION_LENGTH, UI } from '../../app/constants';
+import { MAX_TASK_DESCRIPTION_LENGTH } from '../../app/constants';
 
 export const TaskCreationRow = () => {
   const dispatch = useAppDispatch();
@@ -68,46 +69,59 @@ export const TaskCreationRow = () => {
     <TableRow>
       <TableCell className="icon" />
       <TableCell>
-        <Select
-          value={taskType}
-          onChange={(event) => setTaskType(event.target.value)}
-          size="small"
-          style={{
-            fontSize: UI.SELECT.FONT_SIZE,
-            marginRight: UI.SELECT.MARGIN_RIGHT,
-            minWidth: UI.SELECT.MIN_WIDTH,
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: { xs: 1, sm: 1 },
+            alignItems: { xs: 'stretch', sm: 'center' },
           }}
         >
-          {DEFAULT_TASK_TYPES.map((type) => (
-            <MenuItem key={type.id} value={type.id}>
-              {type.name}
-            </MenuItem>
-          ))}
-        </Select>
-        <Input
-          inputRef={inputRef}
-          style={{ fontSize: UI.INPUT.FONT_SIZE }}
-          placeholder="Task name/description"
-          value={description}
-          onChange={(event) => setDescription(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              addTask();
-            } else if (event.key === 'Escape') {
-              setDescription('');
-              inputRef.current?.blur();
-            }
-          }}
-        />
-        <Button
-          color="secondary"
-          size="small"
-          variant="contained"
-          style={{ marginLeft: UI.BUTTON.MARGIN_LEFT }}
-          onClick={addTask}
-        >
-          Add Task
-        </Button>
+          <Select
+            value={taskType}
+            onChange={(event) => setTaskType(event.target.value)}
+            size="small"
+            sx={{
+              fontSize: { xs: 14, sm: 13 },
+              minWidth: { xs: '100%', sm: 100 },
+            }}
+          >
+            {DEFAULT_TASK_TYPES.map((type) => (
+              <MenuItem key={type.id} value={type.id}>
+                {type.name}
+              </MenuItem>
+            ))}
+          </Select>
+          <Input
+            inputRef={inputRef}
+            sx={{
+              fontSize: { xs: 14, sm: 13 },
+              flex: { sm: 1 },
+            }}
+            placeholder="Task name/description"
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                addTask();
+              } else if (event.key === 'Escape') {
+                setDescription('');
+                inputRef.current?.blur();
+              }
+            }}
+          />
+          <Button
+            color="secondary"
+            size="small"
+            variant="contained"
+            sx={{
+              minHeight: { xs: 44, sm: 'auto' },
+            }}
+            onClick={addTask}
+          >
+            Add Task
+          </Button>
+        </Box>
       </TableCell>
       <TableCell colSpan={11}></TableCell>
       <TimeSummaryCell totalMinutes={totalMinutes} />

diff --git a/src/components/task/TaskRow.tsx b/src/components/task/TaskRow.tsx
@@ -8,6 +8,7 @@ import {
   Select,
   MenuItem,
   Chip,
+  Box,
 } from '@mui/material';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { TimeRowCell } from '../time/TimeRow';
@@ -28,7 +29,7 @@ import {
 } from '../../app/slices/timeSlice';
 import { removeTaskFromDate } from '../../app/slices/dateSlice';
 import { DEFAULT_TASK_TYPES, getTaskType } from '../../types/taskTypes';
-import { MAX_TASK_DESCRIPTION_LENGTH, UI } from '../../app/constants';
+import { MAX_TASK_DESCRIPTION_LENGTH } from '../../app/constants';
 
 interface TaskRowProps {
   taskId: number;
@@ -170,7 +171,9 @@ export const TaskRow = (props: TaskRowProps) => {
         <HighlightOffIcon
           onClick={doDeleteTask}
           className="taskDelete"
-          fontSize="small"
+          sx={{
+            fontSize: { xs: '1.5rem', sm: '1.25rem' },
+          }}
           role="button"
           aria-label={`Delete task: ${task.description}`}
           tabIndex={0}
@@ -203,9 +206,9 @@ export const TaskRow = (props: TaskRowProps) => {
             backgroundColor: currentTaskType.color,
             color: '#fff',
             fontWeight: 'bold',
-            fontSize: UI.CHIP.FONT_SIZE,
-            height: UI.CHIP.HEIGHT,
-            marginRight: UI.CHIP.MARGIN_RIGHT,
+            fontSize: { xs: '0.75rem', sm: '0.7rem' },
+            height: { xs: 24, sm: 20 },
+            marginRight: 1,
           }}
         />
         {task.description}
@@ -218,50 +221,63 @@ export const TaskRow = (props: TaskRowProps) => {
     <TableRow>
       <TableCell className="icon" />
       <TableCell component="th" scope="row" className="cell">
-        <Select
-          value={taskType}
-          onChange={(event) => setTaskType(event.target.value)}
-          size="small"
-          style={{
-            fontSize: UI.SELECT.FONT_SIZE,
-            marginRight: UI.SELECT.MARGIN_RIGHT,
-            minWidth: UI.SELECT.MIN_WIDTH,
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: { xs: 1, sm: 1 },
+            alignItems: { xs: 'stretch', sm: 'center' },
           }}
         >
-          {DEFAULT_TASK_TYPES.map((type) => (
-            <MenuItem key={type.id} value={type.id}>
-              {type.name}
-            </MenuItem>
-          ))}
-        </Select>
-        <Input
-          inputRef={inputRef}
-          style={{ fontSize: UI.INPUT.FONT_SIZE }}
-          value={description}
-          onChange={(event) => setDescription(event.target.value)}
-          onKeyDown={(event) => {
-            if (!editing) {
-              return;
-            }
+          <Select
+            value={taskType}
+            onChange={(event) => setTaskType(event.target.value)}
+            size="small"
+            sx={{
+              fontSize: { xs: 14, sm: 13 },
+              minWidth: { xs: '100%', sm: 100 },
+            }}
+          >
+            {DEFAULT_TASK_TYPES.map((type) => (
+              <MenuItem key={type.id} value={type.id}>
+                {type.name}
+              </MenuItem>
+            ))}
+          </Select>
+          <Input
+            inputRef={inputRef}
+            sx={{
+              fontSize: { xs: 14, sm: 13 },
+              flex: { sm: 1 },
+            }}
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            onKeyDown={(event) => {
+              if (!editing) {
+                return;
+              }
 
-            if (event.key === 'Enter') {
-              doUpdateTask();
-            } else if (event.key === 'Escape') {
-              dispatch(endTaskEdit());
-              setDescription(task.description);
-              setTaskType(task.type || 'task');
-            }
-          }}
-        />
-        <Button
-          color="secondary"
-          size="small"
-          variant="contained"
-          style={{ marginLeft: UI.BUTTON.MARGIN_LEFT }}
-          onClick={doUpdateTask}
-        >
-          Update Task
-        </Button>
+              if (event.key === 'Enter') {
+                doUpdateTask();
+              } else if (event.key === 'Escape') {
+                dispatch(endTaskEdit());
+                setDescription(task.description);
+                setTaskType(task.type || 'task');
+              }
+            }}
+          />
+          <Button
+            color="secondary"
+            size="small"
+            variant="contained"
+            sx={{
+              minHeight: { xs: 44, sm: 'auto' },
+            }}
+            onClick={doUpdateTask}
+          >
+            Update Task
+          </Button>
+        </Box>
       </TableCell>
       {taskRowTime()}
     </TableRow>

diff --git a/src/components/time/TimeRow.css b/src/components/time/TimeRow.css
@@ -14,6 +14,14 @@
   z-index: 200;
 }
 
+/* Larger touch targets on mobile */
+@media (max-width: 599px) {
+  .increment {
+    width: 16px;
+    height: 32px;
+  }
+}
+
 .increment:hover {
   background-color: #f9643d;
   cursor: pointer;