fix: prevent course info bar overflow (#1042)

Co-authored-by: Kevin Wu <[email protected]>
icssc · Nov 21, 2024 · 491e473 · 491e473
1 parent ea3f291
commit 491e473
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 13 deletions.
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx
@@ -187,7 +187,9 @@ const CourseInfoBar = (props: CourseInfoBarProps) => {
                     void togglePopover(currentTarget);
                 }}
             >
-                {`${deptCode} ${courseNumber} | ${courseTitle}`}
+                <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                    {`${deptCode} ${courseNumber} | ${courseTitle}`}
+                </span>
             </Button>
             <Popover
                 anchorEl={anchorEl}

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx
@@ -1,11 +1,11 @@
-import { Button, Paper, Popper, useMediaQuery } from '@material-ui/core';
+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 { MOBILE_BREAKPOINT } from '../../../globals';
-
 import { logAnalytics } from '$lib/analytics';
+import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 
 const styles = {
     button: {
@@ -33,8 +33,10 @@ function CourseInfoButton({
     analyticsAction,
     analyticsCategory,
 }: CourseInfoButtonProps) {
+    const theme = useTheme();
+    const isMobileScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
     const [popupAnchor, setPopupAnchor] = useState<HTMLElement | null>(null);
-    const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`);
     const [isClicked, setIsClicked] = useState(false);
 
     useEffect(() => {
@@ -65,11 +67,14 @@ function CourseInfoButton({
         }
     };
 
+    const scheduleManagementWidth = useScheduleManagementStore((state) => state.scheduleManagementWidth);
+    const compact =
+        isMobileScreen || (scheduleManagementWidth && scheduleManagementWidth < theme.breakpoints.values.xs);
+
     return (
         <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ display: 'flex' }}>
             <Button
                 className={classes.button}
-                startIcon={!isMobileScreen && icon}
                 variant="contained"
                 size="small"
                 onClick={(event: React.MouseEvent<HTMLElement>) => {
@@ -87,7 +92,20 @@ function CourseInfoButton({
                     }
                 }}
             >
-                {text}
+                <span style={{ display: 'flex', gap: 4 }}>
+                    {icon}
+                    {!compact && (
+                        <span
+                            style={{
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                            }}
+                        >
+                            {text}
+                        </span>
+                    )}
+                </span>
             </Button>
 
             {popupContent && (

diff --git 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 { useCallback, useEffect, useRef } from 'react';
 import Split from 'react-split';
 
 import Calendar from '$components/Calendar/CalendarRoot';
@@ -10,6 +10,7 @@ import NotificationSnackbar from '$components/NotificationSnackbar';
 import PatchNotes from '$components/PatchNotes';
 import ScheduleManagement from '$components/SharedRoot';
 import { Tutorial } from '$components/Tutorial';
+import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 
 function MobileHome() {
     return (
@@ -22,6 +23,29 @@ function MobileHome() {
 
 function DesktopHome() {
     const theme = useTheme();
+    const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth);
+
+    const scheduleManagementRef = useRef<HTMLDivElement>();
+
+    const handleDrag = useCallback(() => {
+        const scheduleManagementElement = scheduleManagementRef.current;
+        if (!scheduleManagementElement) {
+            return;
+        }
+
+        const elementWidth = scheduleManagementElement.getBoundingClientRect().width;
+        setScheduleManagementWidth(elementWidth);
+    }, [setScheduleManagementWidth]);
+
+    useEffect(() => {
+        handleDrag();
+
+        window.addEventListener('resize', handleDrag);
+
+        return () => {
+            window.removeEventListener('resize', handleDrag);
+        };
+    }, [handleDrag]);
 
     return (
         <>
@@ -30,7 +54,7 @@ function DesktopHome() {
 
                 <Split
                     sizes={[45, 55]}
-                    minSize={100}
+                    minSize={400}
                     expandToMin={false}
                     gutterSize={10}
                     gutterAlign="center"
@@ -43,11 +67,12 @@ function DesktopHome() {
                         backgroundColor: theme.palette.primary.main,
                         width: '10px',
                     })}
+                    onDrag={handleDrag}
                 >
                     <Stack direction="column">
                         <Calendar isMobile={false} />
                     </Stack>
-                    <Stack direction="column">
+                    <Stack direction="column" ref={scheduleManagementRef}>
                         <ScheduleManagement />
                     </Stack>
                 </Split>

diff --git a/apps/antalmanac/src/stores/HoveredStore.ts b/apps/antalmanac/src/stores/HoveredStore.ts
@@ -1,5 +1,4 @@
-import { AASection, ScheduleCourse } from '@packages/antalmanac-types';
-import { CourseDetails } from '@packages/antalmanac-types';
+import { AASection, ScheduleCourse, CourseDetails } from '@packages/antalmanac-types';
 import { create } from 'zustand';
 
 import { calendarizeCourseEvents, calendarizeFinals } from './calendarizeHelpers';

diff --git a/apps/antalmanac/src/stores/ScheduleManagementStore.ts b/apps/antalmanac/src/stores/ScheduleManagementStore.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface ScheduleManagementStore {
+    scheduleManagementWidth: number | null;
+    setScheduleManagementWidth: (width: number) => void;
+}
+
+export const useScheduleManagementStore = create<ScheduleManagementStore>((set) => ({
+    scheduleManagementWidth: null,
+    setScheduleManagementWidth: (width) => set({ scheduleManagementWidth: width }),
+}));