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/common/ScheduleTotalHoursAndCourses.tsx

@@ -24,17 +24,24 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-full flex flex-col items-start whitespace-nowrap'>
-            <Text className='truncate text-ut-burntorange' variant='h1' as='span'>
-                {`${scheduleName} `}
-            </Text>
-            <Text variant='h3' as='div' className='flex flex-row items-center gap-2.5 text-theme-black'>
-                <Text variant='h4' as='span' className='hidden text-ut-black uppercase screenshot:inline sm:inline'>
-                    {totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
+        <div className='w-full flex flex-col items-start'>
+            <div className='max-w-full overflow-hidden'>
+                <Text className='block w-full truncate text-ut-burntorange' variant='h1' as='span'>
+                    {scheduleName}
                 </Text>
-
-                <Text variant='h4' as='span' className='hidden text-ut-black uppercase screenshot:inline sm:inline'>
-                    {totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
+            </div>
+            <Text variant='h3' as='div' className='flex flex-row items-center gap-2.5 text-theme-black'>
+                <Text variant='h4' as='span' className='inline text-theme-black'>
+                    {totalHours}&nbsp;
+                    <Text variant='h3' as='span' className='inline text-theme-black font-all-small-caps!'>
+                        {totalHours === 1 ? 'Hour' : 'Hours'}
+                    </Text>
+                </Text>
+                <Text variant='h4' as='span' className='inline text-theme-black'>
+                    {totalCourses}&nbsp;
+                    <Text variant='h3' as='span' className='inline text-theme-black font-all-small-caps!'>
+                        {totalCourses === 1 ? 'Course' : 'Courses'}
+                    </Text>
                 </Text>
             </Text>
         </div>