fix: prevent course info bar overflow

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}

apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx

@@ -1,11 +1,10 @@
-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 { useEffect, useState } from 'react';
 
-import { MOBILE_BREAKPOINT } from '../../../globals';
-
 import { logAnalytics } from '$lib/analytics';
+import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 
 const styles = {
     button: {
@@ -34,7 +33,6 @@ function CourseInfoButton({
     analyticsCategory,
 }: CourseInfoButtonProps) {
     const [popupAnchor, setPopupAnchor] = useState<HTMLElement | null>(null);
-    const isMobileScreen = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`);
     const [isClicked, setIsClicked] = useState(false);
 
     useEffect(() => {
@@ -65,11 +63,13 @@ function CourseInfoButton({
         }
     };
 
+    const scheduleManagementWidth = useScheduleManagementStore((state) => state.scheduleManagementWidth);
+    const compact = scheduleManagementWidth && scheduleManagementWidth < 600;
+
     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 +87,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 && (

apps/antalmanac/src/routes/Home.tsx

@@ -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,23 @@ function MobileHome() {
 
 function DesktopHome() {
     const theme = useTheme();
+    const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth);
+
+    const handleDrag = (sizes: number[]) => {
+        if (!window.innerWidth) {
+            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);
+    };
 
     return (
         <>
@@ -30,7 +48,7 @@ function DesktopHome() {
 
                 <Split
                     sizes={[45, 55]}
-                    minSize={100}
+                    minSize={400}
                     expandToMin={false}
                     gutterSize={10}
                     gutterAlign="center"
@@ -43,6 +61,7 @@ function DesktopHome() {
                         backgroundColor: theme.palette.primary.main,
                         width: '10px',
                     })}
+                    onDrag={handleDrag}
                 >
                     <Stack direction="column">
                         <Calendar isMobile={false} />

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';

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 }),
+}));