refactor(timeline): default to fixed size timeline

apps/client/src/views/timeline/Timeline.tsx

@@ -24,7 +24,7 @@ interface TimelineProps {
 export default memo(Timeline);
 function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: TimelineProps) {
   const { width: screenWidth } = useViewportSize();
-  const { hidePast, autosize } = useTimelineOptions();
+  const { hidePast, fixedSize } = useTimelineOptions();
   const selectedRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
@@ -38,7 +38,7 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
   useHorizontalFollowComponent({
     followRef: selectedRef,
     scrollRef: scrollContainerRef,
-    doFollow: autosize,
+    doFollow: !fixedSize,
     selectedEventId: selectedEventId,
     // No offset when hiding past events to ensure content starts at 0
     leftOffset: hidePast ? 0 : screenWidth / 6,
@@ -52,8 +52,8 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
         duration: event.duration,
       }));
 
-    return calculateTimelineLayout(playableEvents, scheduleStart, scheduleEnd, screenWidth, autosize);
-  }, [rundown, scheduleStart, scheduleEnd, screenWidth, autosize]);
+    return calculateTimelineLayout(playableEvents, scheduleStart, scheduleEnd, screenWidth, !fixedSize);
+  }, [rundown, scheduleStart, scheduleEnd, screenWidth, fixedSize]);
 
   if (totalDuration === 0) {
     return null;
@@ -75,7 +75,7 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
   });
 
   return (
-    <div ref={scrollContainerRef} className={cx([style.timelineContainer, autosize && style.scroll])}>
+    <div ref={scrollContainerRef} className={cx([style.timelineContainer, !fixedSize && style.scroll])}>
       <div className={style.timeline} style={{ width: totalWidth }}>
         <TimelineMarkers startHour={startHour} endHour={endHour} />
         {rundown.map((event, index) => {

apps/client/src/views/timeline/timeline.options.ts

@@ -22,9 +22,9 @@ export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
           defaultValue: false,
         },
         {
-          id: 'autosize',
-          title: 'Autosize timeline',
-          description: 'Timeline will adjust sizes to help with readability and automatically scroll if necessary',
+          id: 'fixedSize',
+          title: 'Fixed timeline size',
+          description: 'Timeline will have a fixed size to prevent scrolling',
           type: 'boolean',
           defaultValue: false,
         },
@@ -35,7 +35,7 @@ export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
 
 type TimelineOptions = {
   hidePast: boolean;
-  autosize: boolean;
+  fixedSize: boolean;
 };
 
 /**
@@ -48,7 +48,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
   return {
     hidePast: isStringBoolean(getValue('hidePast')),
-    autosize: isStringBoolean(getValue('autosize')),
+    fixedSize: isStringBoolean(getValue('fixedSize')),
   };
 }