feat(ui): calendar header redesign (#479)

* feat(ui): calendar header redesign (WIP)

* feat(ui): calendar header redesign (WIP)

* chore: use path alias

* feat(ui): calendar header redesign

* implement Isaiah changes

* refactor to prevent unnecessary recreations of resize observer

* clean up resize observer and remove unnecessary checks

* remove offwhite border from toolbar

* merge

* complete toolbar

* update screenreader functionality

* ensure truncation works

* merge

* finish new toolbar

* remove unused screen size hook and .mjs file

* add in export button with options

* add static size for export button dropdown to prevent shrinking on smaller viewports

* change schedule section min width to prevent shrinkage

* change text for schedule section to match small caps

* fix truncating issues with small caps

* remove hidden overflow

* add padding

* add min height for hader

* reserve scrollbar width

* tmp

* add sticky positioning to header

* fix inert prop issue

* remove pnpm lock file

* fix scrollbar appearing too early

* fix vertical stickiness

* fix(ui): fix header spacing

* fix(ui): update total hours and courses to be h4

* fix(ui): reduce top spacing on header

* fix(ui): remove header top padding

* fix(ui): stop bottom scrollbar from shifting layout

* feat: add functionality to header and fix screenshot spacing

* feat: add functionality to header and fix screenshot spacing

* fix(ui): allow scrollbar in header and adjust padding to compensate for reserved space

* fix(ui): make export options container hug children

* fix(ui): add offwhite border

* chore: add back lock file from main branch :)

* feat(ui): add reduced motion for accessability

* feat(ui): change right scrollbar on calendar grid to be hidden when not necessary

* chore: make all buttons except export invisible

* chore: remove all buttons except export and adjust hardcoded pixel widths for responsiveness

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Razboy20 <razboy20@gmail.com>

src/views/components/calendar/Calendar.tsx

@@ -5,7 +5,7 @@ import { CRX_PAGES } from '@shared/types/CRXPages';
 import { openReportWindow } from '@shared/util/openReportWindow';
 import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar';
 import CalendarGrid from '@views/components/calendar/CalendarGrid';
-import CalendarHeader from '@views/components/calendar/CalendarHeader';
+import CalendarHeader from '@views/components/calendar/CalendarHeader/CalendarHeader';
 import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules';
 import ResourceLinks from '@views/components/calendar/ResourceLinks';
 import Divider from '@views/components/common/Divider';
@@ -23,6 +23,7 @@ import { Button } from '../common/Button';
 import { LargeLogo } from '../common/LogoIcon';
 import Text from '../common/Text/Text';
 import CalendarFooter from './CalendarFooter';
+
 /**
  * Calendar page component
  */
@@ -64,7 +65,7 @@ export default function Calendar(): JSX.Element {
                 <div className='h-screen flex overflow-auto'>
                     <div
                         className={clsx(
-                            'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-theme-offwhite1 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] duration-300 ease-out-expo transition-property-max-width screenshot:hidden',
+                            'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-theme-offwhite1 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
                             {
                                 'max-w-[20.3125rem] ': showSidebar,
                                 'max-w-0 pointer-events-none': !showSidebar,
@@ -72,7 +73,7 @@ export default function Calendar(): JSX.Element {
                         )}
                         tabIndex={showSidebar ? 0 : -1}
                         aria-hidden={!showSidebar}
-                        {...{ inert: !showSidebar ? '' : undefined }}
+                        {...{ inert: !showSidebar }}
                     >
                         <div className='sticky top-0 z-50 w-full flex items-center justify-between gap-x-3xl bg-white px-spacing-8 pb-spacing-6'>
                             <LargeLogo />
@@ -116,14 +117,21 @@ export default function Calendar(): JSX.Element {
                         <CalendarFooter />
                     </div>
 
-                    <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
+                    <div
+                        style={
+                            {
+                                // scrollbarGutter: 'stable',
+                            }
+                        }
+                        className='h-full flex flex-grow flex-col overflow-x-scroll px-spacing-5'
+                    >
                         <CalendarHeader
                             sidebarOpen={showSidebar}
                             onSidebarToggle={() => {
                                 setShowSidebar(!showSidebar);
                             }}
                         />
-                        <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
+                        <div className='min-h-2xl min-w-5xl flex-grow overflow-auto pl-spacing-3 pt-spacing-3 screenshot:min-h-xl'>
                             <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
                         </div>
                         <CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />