add support for mobile by making the sidebar take up the full width of the screen and reducing the font size

Author: barrymun

README.md

@@ -11,15 +11,15 @@
 - [x] Add cspell spell checker
 - [x] Add husky pre-commit hooks
 - [x] Code chunking for improved performance
-- [ ] Use checkboxes in the directory tree to indicate which files are shown in the main section
+- [x] Use checkboxes in the directory tree to indicate which files are shown in the main section
 - [ ] Construct more resilient unit tests
 - [ ] i18n translations
 - [ ] Light/Dark mode
 - [ ] Make use of the `getTreeStatistics` function
 
 ### Product
 
-- [ ] Make the size of the sidebar adjustable (by dragging it?)
+- [ ] ~~Make the size of the sidebar adjustable (by dragging it?)~~
+- [x] Add support for mobile by making the sidebar take up the full width of the screen and reducing the font size
 - [ ] Make the file names sticky as the user scrolls down when examining the diffs
 - [ ] Update the `FileChangeType` status next to the file names to have their own colours
-- [ ] Make some optimisations for mobile viewers

src/components/app/index.tsx

@@ -1,7 +1,7 @@
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import MenuIcon from "@mui/icons-material/Menu";
-import { Box, Drawer, IconButton, Toolbar, Typography, useTheme } from "@mui/material";
+import { Box, Drawer, IconButton, Toolbar, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useState } from "react";
 import { Bounce, ToastContainer } from "react-toastify";
 
@@ -14,9 +14,10 @@ import DirectoryTree from "@/features/directoryTree";
 import { drawerWidth } from "@/utils/constants";
 
 export default function App() {
-  const { direction, spacing } = useTheme();
+  const { breakpoints, direction, spacing } = useTheme();
+  const isMobile = useMediaQuery(breakpoints.down("sm"));
 
-  const [open, setOpen] = useState<boolean>(true);
+  const [open, setOpen] = useState<boolean>(!isMobile);
 
   return (
     <>
@@ -59,11 +60,17 @@ export default function App() {
         variant="persistent"
         anchor="left"
         sx={{
-          width: drawerWidth,
+          width: {
+            xs: "100%",
+            sm: drawerWidth,
+          },
           flexShrink: 0,
 
           "& .MuiDrawer-paper": {
-            width: drawerWidth,
+            width: {
+              xs: "100%",
+              sm: drawerWidth,
+            },
             boxSizing: "border-box",
             overflowY: "hidden",
           },

src/components/styled/header/index.tsx

@@ -8,15 +8,17 @@ interface HeaderProps extends AppBarProps {
 
 export const Header = styled(AppBar, {
   shouldForwardProp: (prop) => prop !== "open",
-})<HeaderProps>(() => ({
+})<HeaderProps>(({ theme }) => ({
   width: "100%",
   marginLeft: 0,
   variants: [
     {
       props: ({ open }) => open,
       style: {
-        width: `calc(100% - ${drawerWidth}px)`,
-        marginLeft: `${drawerWidth}px`,
+        [theme.breakpoints.up("sm")]: {
+          width: `calc(100% - ${drawerWidth}px)`,
+          marginLeft: `${drawerWidth}px`,
+        },
       },
     },
   ],

src/components/styled/main/index.tsx

@@ -7,8 +7,12 @@ export const Main = styled("main", {
 })<{ open?: boolean }>(({ theme, open }) => ({
   flexGrow: 1,
   padding: theme.spacing(3),
-  marginLeft: open ? `${drawerWidth}px` : 0,
-  width: open ? `calc(100% - ${drawerWidth}px)` : "100%",
   height: "100%",
   overflowY: "auto",
+  marginLeft: open ? `${drawerWidth}px` : 0,
+  width: open ? `calc(100% - ${drawerWidth}px)` : "100%",
+  [theme.breakpoints.down("sm")]: {
+    marginLeft: 0,
+    width: "100%",
+  },
 }));

src/features/diffViewer/common/diffTableHeader/index.tsx

@@ -18,7 +18,10 @@ export default function DiffTableHeader({ hunk, isUnifiedView = false }: DiffTab
     <TableRow sx={{ bgcolor: "grey.50", userSelect: "none" }}>
       <MinimalTableCell
         sx={{
-          minWidth: spacing(7),
+          minWidth: {
+            xs: spacing(6),
+            sm: spacing(7),
+          },
           position: "sticky",
           left: 0,
           textAlign: "right",
@@ -30,7 +33,10 @@ export default function DiffTableHeader({ hunk, isUnifiedView = false }: DiffTab
       {isUnifiedView && (
         <MinimalTableCell
           sx={{
-            minWidth: spacing(7),
+            minWidth: {
+              xs: spacing(6),
+              sm: spacing(7),
+            },
             position: "sticky",
             left: 0,
             textAlign: "right",

src/features/diffViewer/splitViewer/splitTableRow/index.tsx

@@ -57,7 +57,10 @@ export default function SplitTableRow({ side, line }: SplitTableRowProps) {
       <MinimalTableCell
         sx={{
           bgcolor: bgColor,
-          minWidth: spacing(7),
+          minWidth: {
+            xs: spacing(6),
+            sm: spacing(7),
+          },
           position: "sticky",
           left: 0,
           textAlign: "right",

src/features/diffViewer/unifiedViewer/unifiedTableRow/index.tsx

@@ -79,7 +79,10 @@ export default function UnifiedTableRow({ line }: UnifiedTableRowProps) {
       <MinimalTableCell
         sx={{
           bgcolor: bgColor,
-          minWidth: spacing(7),
+          minWidth: {
+            xs: spacing(6),
+            sm: spacing(7),
+          },
           position: "sticky",
           left: 0,
           textAlign: "right",
@@ -104,9 +107,15 @@ export default function UnifiedTableRow({ line }: UnifiedTableRowProps) {
       <MinimalTableCell
         sx={{
           bgcolor: bgColor,
-          minWidth: spacing(7),
           position: "sticky",
-          left: spacing(7),
+          minWidth: {
+            xs: spacing(6),
+            sm: spacing(7),
+          },
+          left: {
+            xs: spacing(6),
+            sm: spacing(7),
+          },
           textAlign: "right",
           userSelect: "none",
           borderRight: 1,

src/main.tsx

@@ -1,7 +1,3 @@
-import "@fontsource/inter/300.css";
-import "@fontsource/inter/400.css";
-import "@fontsource/inter/500.css";
-import "@fontsource/inter/700.css";
 import "@fontsource/source-code-pro/300.css";
 import "@fontsource/source-code-pro/400.css";
 import "@fontsource/source-code-pro/500.css";

src/theme/index.tsx

@@ -3,11 +3,13 @@ import { createTheme, responsiveFontSizes } from "@mui/material/styles";
 import { customBlue, customGreen, customRed, customYellow } from "./customColors";
 
 // https://mui.com/material-ui/customization/typography/
-let theme = createTheme({
+let theme = createTheme({});
+
+theme = createTheme({
   typography: {
     fontFamily: [
       '"Source Code Pro"',
-      "Inter",
+      // "Inter",
       "-apple-system",
       "BlinkMacSystemFont",
       '"Segoe UI"',
@@ -27,6 +29,17 @@ let theme = createTheme({
     yellow: customYellow,
   },
   components: {
+    // Add global font size scaling for mobile
+    MuiCssBaseline: {
+      styleOverrides: {
+        html: {
+          fontSize: 16, // Desktop
+          [theme.breakpoints.down("sm")]: {
+            fontSize: 13, // Mobile
+          },
+        },
+      },
+    },
     MuiTable: {
       styleOverrides: {
         root: {