From 2acf53375d7f115c990f04a0f02087782e3203c1 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Wed, 20 Nov 2024 19:36:46 -0800
Subject: [PATCH] feat: make various improvements

---
 .../SectionTable/CourseInfoButton.tsx         |  7 +++++-
 apps/antalmanac/src/routes/Home.tsx           | 24 ++++++++-----------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx
index 7d4252f8f..0a9e2d9a2 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx
@@ -1,6 +1,7 @@
 import { Button, Paper, Popper } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import { ClassNameMap } from '@material-ui/core/styles/withStyles';
+import { useMediaQuery, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
 
 import { logAnalytics } from '$lib/analytics';
@@ -32,6 +33,9 @@ function CourseInfoButton({
     analyticsAction,
     analyticsCategory,
 }: CourseInfoButtonProps) {
+    const theme = useTheme();
+    const isMobileScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
     const [popupAnchor, setPopupAnchor] = useState<HTMLElement | null>(null);
     const [isClicked, setIsClicked] = useState(false);
 
@@ -64,7 +68,8 @@ function CourseInfoButton({
     };
 
     const scheduleManagementWidth = useScheduleManagementStore((state) => state.scheduleManagementWidth);
-    const compact = scheduleManagementWidth && scheduleManagementWidth < 600;
+    const compact =
+        isMobileScreen || (scheduleManagementWidth && scheduleManagementWidth < theme.breakpoints.values.xs);
 
     return (
         <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ display: 'flex' }}>
diff --git a/apps/antalmanac/src/routes/Home.tsx b/apps/antalmanac/src/routes/Home.tsx
index ba77aaeb8..185d7c915 100644
--- a/apps/antalmanac/src/routes/Home.tsx
+++ b/apps/antalmanac/src/routes/Home.tsx
@@ -1,7 +1,7 @@
 import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
-import { CssBaseline, useMediaQuery, useTheme } from '@mui/material';
-import { Stack } from '@mui/material';
+import { CssBaseline, useMediaQuery, useTheme, Stack } from '@mui/material';
+import { useRef } from 'react';
 import Split from 'react-split';
 
 import Calendar from '$components/Calendar/CalendarRoot';
@@ -25,20 +25,16 @@ function DesktopHome() {
     const theme = useTheme();
     const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth);
 
-    const handleDrag = (sizes: number[]) => {
-        if (!window.innerWidth) {
+    const scheduleManagementRef = useRef<HTMLDivElement>();
+
+    const handleDrag = () => {
+        const scheduleManagementElement = scheduleManagementRef.current;
+        if (!scheduleManagementElement) {
             return;
         }
 
-        /**
-         * Sizes is a two element array containing the size of each side (in percentages)
-         *
-         * @example [25, 75]
-         */
-        const [_, scheduleManagementPercentage] = sizes;
-        const scheduleManagementWidth = window.innerWidth * scheduleManagementPercentage * 0.01;
-
-        setScheduleManagementWidth(scheduleManagementWidth);
+        const elementWidth = scheduleManagementElement.getBoundingClientRect().width;
+        setScheduleManagementWidth(elementWidth);
     };
 
     return (
@@ -66,7 +62,7 @@ function DesktopHome() {
                     <Stack direction="column">
                         <Calendar isMobile={false} />
                     </Stack>
-                    <Stack direction="column">
+                    <Stack direction="column" ref={scheduleManagementRef}>
                         <ScheduleManagement />
                     </Stack>
                 </Split>