Implement tablet & mobile versions of VSR table page

frontend/src/app/login/page.tsx

@@ -8,7 +8,7 @@ import styles from "@/app/login/page.module.css";
 import { signInWithEmailAndPassword } from "firebase/auth";
 import { initFirebase } from "@/firebase/firebase";
 import { useRouter } from "next/navigation";
-import { useMediaQuery } from "@mui/material";
+import { useScreenSizes } from "@/util/useScreenSizes";
 
 const Login = () => {
   const [email, setEmail] = useState("");
@@ -18,7 +18,7 @@ const Login = () => {
 
   const router = useRouter();
 
-  const isMobile = useMediaQuery("@media screen and (max-width: 550px)");
+  const { isMobile } = useScreenSizes();
 
   const sendTokenToBackend = async (token: string) => {
     try {

frontend/src/app/staff/vsr/page.module.css

@@ -7,10 +7,9 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin: 105px auto 0;
+  margin: 105px 120px 0;
   padding: 0px;
   gap: 40px;
-  max-width: 1200px;
 }
 
 .flex {
@@ -22,15 +21,15 @@
 .button_row {
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
 }
 
 .row_left {
   gap: 40px;
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .statusContainer {
@@ -53,14 +52,14 @@
 }
 
 .statusWrapper {
-  min-width: 240px;
+  min-width: 230px;
 }
 
 .row_right {
   gap: 40px;
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
 }
 
 .buttons {
@@ -95,3 +94,37 @@
   align-items: center;
   width: 100%;
 }
+
+/* shrink the margins at a screen size larger than tablet to avoid overflow */
+@media screen and (max-width: 1150px) {
+  .column {
+    margin: 52px 48px 0;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .row_right {
+    gap: 4px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .column {
+    margin: 37px 24px 0;
+  }
+
+  .statusWrapper {
+    min-width: 190px;
+  }
+
+  .statusLabel {
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 475px) {
+  .statusWrapper {
+    min-width: unset;
+  }
+}

frontend/src/app/staff/vsr/page.tsx

@@ -8,16 +8,21 @@ import HeaderBar from "@/components/shared/HeaderBar";
 import Image from "next/image";
 import React from "react";
 import { StatusDropdown } from "@/components/VSRIndividual";
+import { useMediaQuery } from "@mui/material";
 
 export default function VSRTableView() {
+  const searchOnOwnRow = useMediaQuery("@media screen and (max-width: 1000px)");
+  const buttonIconsOnly = useMediaQuery("@media screen and (max-width: 700px)");
+  const buttonIconSize = buttonIconsOnly ? 16 : 24;
+
   return (
     <div className={styles.page}>
       <HeaderBar />
       <div className={styles.column}>
         <PageTitle />
         <div className={styles.button_row}>
           <div className={styles.row_left}>
-            <SearchKeyword />
+            {searchOnOwnRow ? null : <SearchKeyword />}
 
             <div className={styles.statusContainer}>
               <p className={styles.statusLabel}>Status:</p>
@@ -28,15 +33,26 @@ export default function VSRTableView() {
           </div>
           <div className={styles.row_right}>
             <button className={styles.buttons}>
-              <Image width={24} height={24} src="/round-sort.svg" alt="Filter" />
-              <text className={styles.buttontext}>Filter</text>
+              <Image
+                width={buttonIconSize}
+                height={buttonIconSize}
+                src="/round-sort.svg"
+                alt="Filter"
+              />
+              {buttonIconsOnly ? null : <text className={styles.buttontext}>Filter</text>}
             </button>
             <button className={styles.buttons}>
-              <Image width={24} height={24} src="/upload.svg" alt="Upload" />
-              <text className={styles.buttontext}>Export</text>
+              <Image
+                width={buttonIconSize}
+                height={buttonIconSize}
+                src="/upload.svg"
+                alt="Upload"
+              />
+              {buttonIconsOnly ? null : <text className={styles.buttontext}>Export</text>}
             </button>
           </div>
         </div>
+        {searchOnOwnRow ? <SearchKeyword /> : null}
         <div className={styles.table}>
           <VSRTable />
         </div>

frontend/src/app/vsr/page.tsx

@@ -8,10 +8,10 @@ import Dropdown from "@/components/shared/input/Dropdown";
 import HeaderBar from "@/components/shared/HeaderBar";
 import PageNumber from "@/components/VSRForm/PageNumber";
 import { createVSR, CreateVSRRequest, FurnitureInput } from "@/api/VSRs";
-import { useMediaQuery } from "@mui/material";
 import { FurnitureItem, getFurnitureItems } from "@/api/FurnitureItems";
 import BinaryChoice from "@/components/shared/input/BinaryChoice";
 import { FurnitureItemSelection } from "@/components/VeteranForm/FurnitureItemSelection";
+import { useScreenSizes } from "@/util/useScreenSizes";
 
 interface IFormInput {
   name: string;
@@ -253,7 +253,7 @@ const VeteranServiceRequest: React.FC = () => {
     }));
   };
 
-  const isMobile = useMediaQuery("@media screen and (max-width: 550px)");
+  const { isMobile } = useScreenSizes();
 
   // Execute when submit button is pressed
   const onSubmit: SubmitHandler<IFormInput> = async (data) => {

frontend/src/components/VSRTable/PageTitle/index.tsx

@@ -2,9 +2,5 @@ import React from "react";
 import styles from "@/components/VSRTable/PageTitle/styles.module.css";
 
 export default function PageTitle() {
-  return (
-    <div className={styles.items}>
-      <text>Service Requests</text>
-    </div>
-  );
+  return <text className={styles.items}>Service Requests</text>;
 }

frontend/src/components/VSRTable/PageTitle/styles.module.css

@@ -3,10 +3,22 @@
   color: var(--color-tse-secondary-1);
   font-family: var(--font-title);
   font-size: 40px;
-  font-style: normal;
   font-weight: 700;
-  line-height: 51.2px;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
 }
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .items {
+    font-size: 36px;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .items {
+    font-size: 28px;
+  }
+}

frontend/src/components/VSRTable/VSRTable/index.tsx

@@ -11,80 +11,102 @@ import moment from "moment";
 import { useRouter } from "next/navigation";
 import { StatusChip } from "@/components/shared/StatusChip";
 import { STATUS_OPTIONS } from "@/components/shared/StatusDropdown";
+import { useScreenSizes } from "@/util/useScreenSizes";
 
 const formatDateReceived = (dateReceived: Date) => {
   // Return the empty string on a falsy date received, instead of defaulting to today's date
   return dateReceived ? moment(dateReceived).format("MMMM D, YYYY") : "";
 };
 
-const columns: GridColDef[] = [
-  {
-    ...GRID_CHECKBOX_SELECTION_COL_DEF,
-    width: 72,
-    headerClassName: "header",
-  },
-  {
-    field: "_id",
-    headerName: "Case ID",
-    type: "string",
-    flex: 1,
-    headerAlign: "left",
-    headerClassName: "header",
-    disableColumnMenu: true,
-    hideSortIcons: true,
-  },
-  {
-    field: "militaryID",
-    headerName: "Military ID (Last 4)",
-    type: "string",
-    flex: 1,
-    headerClassName: "header",
-    disableColumnMenu: true,
-    hideSortIcons: true,
-  },
-  {
-    field: "name",
-    headerName: "Name",
-    flex: 1,
-    headerClassName: "header",
-    disableColumnMenu: true,
-    hideSortIcons: true,
-  },
-
-  {
-    field: "dateReceived",
-    headerName: "Date Received",
-    type: "date",
-    sortable: true,
-    flex: 1,
-    headerClassName: "header",
-    disableColumnMenu: true,
-    hideSortIcons: true,
-    valueFormatter: (params) => formatDateReceived(params?.value),
-  },
-  {
-    field: "status",
-    headerName: "Status",
-    type: "string",
-    flex: 1,
-    headerClassName: "header",
-    disableColumnMenu: true,
-    hideSortIcons: true,
-    renderCell: (params) => (
-      <StatusChip
-        status={
-          STATUS_OPTIONS.find((statusOption) => statusOption.value === params.value) ??
-          STATUS_OPTIONS[0]
-        }
-      />
-    ),
-  },
-];
-
 export default function VSRTable() {
   const [vsrs, setVsrs] = React.useState<VSR[]>();
   const router = useRouter();
 
+  const { isMobile, isTablet } = useScreenSizes();
+
+  const columns: GridColDef[] = React.useMemo(() => {
+    const result = [
+      {
+        ...GRID_CHECKBOX_SELECTION_COL_DEF,
+        width: 72,
+        headerClassName: "header",
+      },
+    ];
+
+    if (!isMobile) {
+      result.push({
+        field: "_id",
+        headerName: "Case ID",
+        type: "string",
+        flex: 1,
+        headerAlign: "left",
+        headerClassName: "header",
+        disableColumnMenu: true,
+        hideSortIcons: true,
+        width: 100,
+      });
+    }
+
+    if (!isTablet) {
+      result.push({
+        field: "militaryID",
+        headerName: "Military ID (Last 4)",
+        type: "string",
+        flex: 1,
+        headerClassName: "header",
+        disableColumnMenu: true,
+        hideSortIcons: true,
+        width: 100,
+      });
+    }
+
+    result.push({
+      field: "name",
+      headerName: "Name",
+      flex: 1,
+      headerClassName: "header",
+      disableColumnMenu: true,
+      hideSortIcons: true,
+      width: 100,
+    });
+
+    if (!isTablet) {
+      result.push({
+        field: "dateReceived",
+        headerName: "Date Received",
+        type: "date",
+        sortable: true,
+        flex: 1,
+        headerClassName: "header",
+        disableColumnMenu: true,
+        hideSortIcons: true,
+        valueFormatter: (params) => formatDateReceived(params?.value),
+        width: 100,
+      });
+    }
+
+    result.push({
+      field: "status",
+      headerName: "Status",
+      type: "string",
+      flex: 1,
+      headerClassName: "header",
+      disableColumnMenu: true,
+      hideSortIcons: true,
+      renderCell: (params) => (
+        <StatusChip
+          status={
+            STATUS_OPTIONS.find((statusOption) => statusOption.value === params.value) ??
+            STATUS_OPTIONS[0]
+          }
+        />
+      ),
+      width: 100,
+    });
+
+    return result;
+  }, [isMobile, isTablet]);
+
   useEffect(() => {
     getAllVSRs().then((result) => {
       if (result.success) {
@@ -121,7 +143,7 @@ export default function VSRTable() {
           cursor: "pointer",
         },
         ".MuiDataGrid-cellContent": {
-          fontSize: "1rem",
+          fontSize: isMobile ? "0.75rem" : isTablet ? "0.875rem" : "1rem",
         },
         "&.MuiDataGrid-root": {
           border: "none",