From c29760cccbc99d2d463663e89e51131ae967347d Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Thu, 31 Oct 2024 01:17:10 -0500
Subject: [PATCH 1/4] Fix jumping

---
 .../SearchResultsTable/searchResultsTable.tsx | 35 ++++++++++---------
 .../common/SingleProfInfo/singleProfInfo.tsx  | 29 ++++++++-------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/common/SearchResultsTable/searchResultsTable.tsx b/src/components/common/SearchResultsTable/searchResultsTable.tsx
index 27a01a61..9e5ba202 100644
--- a/src/components/common/SearchResultsTable/searchResultsTable.tsx
+++ b/src/components/common/SearchResultsTable/searchResultsTable.tsx
@@ -58,18 +58,21 @@ function LoadingRow() {
       <TableCell>
         <Checkbox disabled />
       </TableCell>
-      <TableCell component="th" scope="row">
-        <Typography className="w-[20ch] leading-tight text-lg text-gray-600 dark:text-gray-200">
+      <TableCell component="th" scope="row" className="w-full">
+        <Typography className="w-full leading-tight text-lg">
           <Skeleton />
         </Typography>
       </TableCell>
-      <TableCell align="right">
-        <Skeleton variant="rounded" className="rounded-full px-5 py-2 ml-auto">
-          <Typography className="text-base">4.00</Typography>
+      <TableCell align="center">
+        <Skeleton
+          variant="rounded"
+          className="rounded-full px-5 py-2 w-16 block mx-auto"
+        >
+          <Typography className="text-base w-6">A+</Typography>
         </Skeleton>
       </TableCell>
-      <TableCell align="right">
-        <Skeleton variant="rounded" className="rounded-full ml-auto">
+      <TableCell align="center">
+        <Skeleton variant="rounded" className="rounded-full mx-auto">
           <Rating sx={{ fontSize: 25 }} readOnly />
         </Skeleton>
       </TableCell>
@@ -116,9 +119,8 @@ function Row({
     <>
       <TableRow
         onClick={() => setOpen(!open)} // opens/closes the card by clicking anywhere on the row
-        sx={{ '& > *': { borderBottom: 'unset' } }}
       >
-        <TableCell>
+        <TableCell className="border-b-0">
           <Tooltip
             title={open ? 'Minimize Result' : 'Expand Result'}
             placement="top"
@@ -137,6 +139,7 @@ function Row({
           onClick={
             (e) => e.stopPropagation() // prevents opening/closing the card when clicking on the compare checkbox
           }
+          className="border-b-0"
         >
           <Tooltip
             title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
@@ -158,7 +161,7 @@ function Row({
             />
           </Tooltip>
         </TableCell>
-        <TableCell component="th" scope="row">
+        <TableCell component="th" scope="row" className="w-full border-b-0">
           <Typography className="leading-tight text-lg text-gray-600 dark:text-gray-200">
             {searchQueryLabel(course) +
               ((typeof course.profFirst === 'undefined' &&
@@ -169,16 +172,16 @@ function Row({
                 : '')}
           </Typography>
         </TableCell>
-        <TableCell align="right">
+        <TableCell align="center" className="border-b-0">
           {((typeof grades === 'undefined' || grades.state === 'error') && (
             <></>
           )) ||
             (grades.state === 'loading' && (
               <Skeleton
                 variant="rounded"
-                className="rounded-full px-5 py-2 ml-auto"
+                className="rounded-full px-5 py-2 w-16 block mx-auto"
               >
-                <Typography className="text-base">A</Typography>
+                <Typography className="text-base w-6">A+</Typography>
               </Skeleton>
             )) ||
             (grades.state === 'done' && (
@@ -187,7 +190,7 @@ function Row({
                 placement="top"
               >
                 <Typography
-                  className="text-base text-black text-center rounded-full px-5 py-2 w-16 block"
+                  className="text-base text-black text-center rounded-full px-5 py-2 w-16 block mx-auto"
                   sx={{ backgroundColor: gpaToColor(grades.data.gpa) }}
                 >
                   {gpaToLetterGrade(grades.data.gpa)}
@@ -196,10 +199,10 @@ function Row({
             )) ||
             null}
         </TableCell>
-        <TableCell align="right">
+        <TableCell align="center" className="border-b-0">
           {((typeof rmp === 'undefined' || rmp.state === 'error') && <></>) ||
             (rmp.state === 'loading' && (
-              <Skeleton variant="rounded" className="rounded-full ml-auto">
+              <Skeleton variant="rounded" className="rounded-full">
                 <Rating sx={{ fontSize: 25 }} readOnly />
               </Skeleton>
             )) ||
diff --git a/src/components/common/SingleProfInfo/singleProfInfo.tsx b/src/components/common/SingleProfInfo/singleProfInfo.tsx
index 5014f7d4..23556c47 100644
--- a/src/components/common/SingleProfInfo/singleProfInfo.tsx
+++ b/src/components/common/SingleProfInfo/singleProfInfo.tsx
@@ -17,29 +17,34 @@ function SingleProfInfo({ rmp }: Props) {
     return (
       <Grid container spacing={2} className="p-4">
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">5.0</p>
+          </Skeleton>
           <p>Professor rating</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">5.0</p>
+          </Skeleton>
           <p>Difficulty</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">1,000</p>
+          </Skeleton>
           <p>Ratings given</p>
         </Grid>
         <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">99%</p>
+          </Skeleton>
           <p>Would take again</p>
         </Grid>
+        <Grid item xs={12}>
+          <Skeleton variant="rounded">
+            <p>Visit Rate My Professors</p>
+          </Skeleton>
+        </Grid>
       </Grid>
     );
   }

From 27840211abbf04911a3f19a502f15285c6a273cc Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Thu, 31 Oct 2024 12:04:24 -0500
Subject: [PATCH 2/4] Migrate to grid v2

---
 .../common/SingleProfInfo/singleProfInfo.tsx  | 22 +++++++++----------
 src/pages/dashboard/index.tsx                 | 10 ++++-----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/common/SingleProfInfo/singleProfInfo.tsx b/src/components/common/SingleProfInfo/singleProfInfo.tsx
index 23556c47..f2b77090 100644
--- a/src/components/common/SingleProfInfo/singleProfInfo.tsx
+++ b/src/components/common/SingleProfInfo/singleProfInfo.tsx
@@ -1,4 +1,4 @@
-import { Grid, Skeleton } from '@mui/material';
+import { Grid2 as Grid, Skeleton } from '@mui/material';
 import Link from 'next/link';
 import React from 'react';
 
@@ -16,31 +16,31 @@ function SingleProfInfo({ rmp }: Props) {
   if (rmp.state === 'loading') {
     return (
       <Grid container spacing={2} className="p-4">
-        <Grid item xs={6}>
+        <Grid size={6}>
           <Skeleton variant="rounded">
             <p className="text-xl font-bold">5.0</p>
           </Skeleton>
           <p>Professor rating</p>
         </Grid>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <Skeleton variant="rounded">
             <p className="text-xl font-bold">5.0</p>
           </Skeleton>
           <p>Difficulty</p>
         </Grid>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <Skeleton variant="rounded">
             <p className="text-xl font-bold">1,000</p>
           </Skeleton>
           <p>Ratings given</p>
         </Grid>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <Skeleton variant="rounded">
             <p className="text-xl font-bold">99%</p>
           </Skeleton>
           <p>Would take again</p>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Skeleton variant="rounded">
             <p>Visit Rate My Professors</p>
           </Skeleton>
@@ -50,27 +50,27 @@ function SingleProfInfo({ rmp }: Props) {
   }
   return (
     <Grid container spacing={2} className="p-4">
-      <Grid item xs={6}>
+      <Grid size={6}>
         <p className="text-xl font-bold">{rmp.data.avgRating}</p>
         <p>Professor rating</p>
       </Grid>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <p className="text-xl font-bold">{rmp.data.avgDifficulty}</p>
         <p>Difficulty</p>
       </Grid>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <p className="text-xl font-bold">
           {rmp.data.numRatings.toLocaleString()}
         </p>
         <p>Ratings given</p>
       </Grid>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <p className="text-xl font-bold">
           {rmp.data.wouldTakeAgainPercent.toFixed(0) + '%'}
         </p>
         <p>Would take again</p>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Link
           href={
             'https://www.ratemyprofessors.com/professor/' + rmp.data.legacyId
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 46da9a4b..fd86db3b 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -1,4 +1,4 @@
-import { Card, Grid } from '@mui/material';
+import { Card, Grid2 as Grid } from '@mui/material';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -724,7 +724,7 @@ export const Dashboard: NextPage = () => {
     contentComponent = (
       <>
         <Grid container spacing={2}>
-          <Grid item xs={12} sm={6} md={6}>
+          <Grid size={{ xs: 12, sm: 6, md: 6 }}>
             <Filters
               manageQuery
               academicSessions={academicSessions}
@@ -732,10 +732,10 @@ export const Dashboard: NextPage = () => {
               addChosenSessions={addChosenSessions}
             />
           </Grid>
-          <Grid item xs={false} sm={6} md={6}></Grid>
+          <Grid size={{ xs: false, sm: 6, md: 6 }}></Grid>
         </Grid>
         <Grid container component="main" wrap="wrap-reverse" spacing={2}>
-          <Grid item xs={12} sm={6} md={6}>
+          <Grid size={{ xs: 12, sm: 6, md: 6 }}>
             <SearchResultsTable
               resultsLoading={results.state}
               includedResults={includedResults}
@@ -746,7 +746,7 @@ export const Dashboard: NextPage = () => {
               removeFromCompare={removeFromCompare}
             />
           </Grid>
-          <Grid item xs={false} sm={6} md={6} className="w-full">
+          <Grid size={{ xs: false, sm: 6, md: 6 }}>
             <div className="sticky top-0 gridsm:max-h-screen overflow-y-auto pt-4">
               <Card>
                 <Carousel names={names}>{tabs}</Carousel>

From d2b751ca92b9f0f95b16434c5af0c1bca9af6b5f Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Fri, 8 Nov 2024 00:22:35 -0600
Subject: [PATCH 3/4] Fix for #291

---
 src/components/common/SearchResultsTable/searchResultsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/SearchResultsTable/searchResultsTable.tsx b/src/components/common/SearchResultsTable/searchResultsTable.tsx
index 1521df7e..83c4f0bb 100644
--- a/src/components/common/SearchResultsTable/searchResultsTable.tsx
+++ b/src/components/common/SearchResultsTable/searchResultsTable.tsx
@@ -163,7 +163,7 @@ function Row({
             onClick={
               (e) => e.stopPropagation() // prevents opening/closing the card when clicking on the text
             }
-            className="leading-tight text-lg text-gray-600 dark:text-gray-200 cursor-text"
+            className="leading-tight text-lg text-gray-600 dark:text-gray-200 cursor-text w-fit"
           >
             {searchQueryLabel(course) +
               ((typeof course.profFirst === 'undefined' &&

From 05e9be9658235ce2cfa679fb6da9a258854b376b Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Sun, 10 Nov 2024 17:21:36 -0600
Subject: [PATCH 4/4] Better width solution

---
 .../common/SearchResultsTable/searchResultsTable.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/SearchResultsTable/searchResultsTable.tsx b/src/components/common/SearchResultsTable/searchResultsTable.tsx
index 83c4f0bb..1bd9e3d0 100644
--- a/src/components/common/SearchResultsTable/searchResultsTable.tsx
+++ b/src/components/common/SearchResultsTable/searchResultsTable.tsx
@@ -66,9 +66,9 @@ function LoadingRow() {
       <TableCell align="center">
         <Skeleton
           variant="rounded"
-          className="rounded-full px-5 py-2 w-16 block mx-auto"
+          className="rounded-full px-5 py-2 min-w-16 block mx-auto"
         >
-          <Typography className="text-base w-6">A+</Typography>
+          <Typography className="text-base">A+</Typography>
         </Skeleton>
       </TableCell>
       <TableCell align="center">