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/components/SharedRoot.tsx

@@ -10,6 +10,7 @@ import loadingGif from './RightPane/CoursePane/SearchForm/Gifs/loading.gif';
 
 import { CoursePaneRoot } from '$components/RightPane/CoursePane/CoursePaneRoot';
 import { getLocalStorageUserId } from '$lib/localStorage';
+import { useScheduleManagementStore } from '$stores/ScheduleManagementStore';
 import { useThemeStore } from '$stores/SettingsStore';
 import { useTabStore } from '$stores/TabStore';
 
@@ -221,6 +222,26 @@ export default function ScheduleManagement() {
      */
     const ref = useRef<HTMLDivElement>();
 
+    const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth);
+
+    useEffect(() => {
+        const element = ref.current;
+
+        if (!element) return;
+
+        const observer = new ResizeObserver(([entry]) => {
+            if (entry.contentRect) {
+                setScheduleManagementWidth(entry.contentRect.width);
+            }
+        });
+
+        observer.observe(element);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [setScheduleManagementWidth]);
+
     const value = isMobile ? activeTab : activeTab - 1 >= 0 ? activeTab - 1 : 0;
 
     // Save the current scroll position to the store.

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