css changes

Author: Lucien950

software/tracksight/frontend/app/live/page.tsx

@@ -24,7 +24,6 @@ export default function LiveDataPage() {
     <DisplayControlProvider> {/* not so sure actually (OLD) */}
       <SignalProvider> {/* provides signal data (OLD) */}
         <SyncedGraphContainer>
-          <div className="h-48"></div>
           {/** TODO(evan): Add pause / play button here */}
           {/** TODO(evan): Add the universal timeline here */}
           {/* TODO rework alerts */}
@@ -42,7 +41,6 @@ export default function LiveDataPage() {
             key={widgetData.id} />
           )}
           <WidgetAdder onAddWidget={appendWidget} />
-          <div className="h-48"></div>
           {/* <DynamicRowManager /> */}
         </SyncedGraphContainer>
       </SignalProvider >

software/tracksight/frontend/components/SyncedGraphContainer.tsx

@@ -45,7 +45,7 @@ function useZoomManager(containerRef: RefObject<HTMLDivElement | null>) {
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
-    
+
     window.addEventListener("wheel", handleWheelZoom, { passive: false });
     return () => {
       window.removeEventListener("wheel", handleWheelZoom);
@@ -61,11 +61,11 @@ export default function SyncedGraphContainer({ children }: { children: ReactNode
   const contentRef = useRef<HTMLDivElement | null>(null); // Renamed from containerRef, this one grows
   const scrollLeftRef = useRef<number>(0);
   const timeRangeRef = useRef<TimeRange | null>(null);
-  
+
   // zoom management (attach wheel listener to the scroll container)
   const scalePxPerSec = useZoomManager(scrollContainerRef);
   const scalePxPerSecRef = useRef<number>(scalePxPerSec);
-  
+
   const updateGraphWidth = useCallback(() => {
     const tr = timeRangeRef.current;
     if (contentRef.current && tr) {
@@ -133,16 +133,12 @@ export default function SyncedGraphContainer({ children }: { children: ReactNode
   return (
     <SyncedGraphContext.Provider value={CTXVAL}>
       {/* outer wrapper handles overflow/scrolling; this the viewport */}
-      <div 
-        ref={scrollContainerRef} 
-        className="w-full overflow-x-auto overflow-y-hidden"
+      <div
+        ref={scrollContainerRef}
+        className="w-full overflow-x-auto overflow-y-hidden min-h-screen pt-14"
       >
         {/* inner content grows in width */}
-        <div 
-          ref={contentRef}
-          className="min-w-full min-h-60 relative" 
-          style={{ width: 4000 }}
-        >
+        <div ref={contentRef} className="min-w-full min-h-60 relative">
           <div className="sticky left-0 top-0 w-screen">
             {children}
           </div>

software/tracksight/frontend/components/widgets/MockWidget.tsx

@@ -31,12 +31,14 @@ const generateRandomValue = (
   }
 };
 
-const MockWidget = memo(({ widgetData, updateMockConfig, onDelete }: 
-  { widgetData: WidgetDataMock, updateMockConfig: 
-    (widgetId: string, 
-      updater: (prevConfigs: MockGraphConfig[]) => MockGraphConfig[]) => void, 
-      onDelete: () => void }
-    ) => {
+const MockWidget = memo(({ widgetData, updateMockConfig, onDelete }:
+  {
+    widgetData: WidgetDataMock, updateMockConfig:
+    (widgetId: string,
+      updater: (prevConfigs: MockGraphConfig[]) => MockGraphConfig[]) => void,
+    onDelete: () => void
+  }
+) => {
   const { isPaused } = usePausePlay();
   const configs = widgetData.configs;
 
@@ -130,8 +132,8 @@ const MockWidget = memo(({ widgetData, updateMockConfig, onDelete }:
       timestamps,
       series: seriesArrays,
     }
-  }, [configs, isPaused]); 
-  
+  }, [configs, isPaused]);
+
   const handleAddSignal = useCallback((e: FormEvent) => {
     e.preventDefault();
     const name = newSignalName.trim() || `Signal ${configs.length + 1}`;
@@ -170,7 +172,7 @@ const MockWidget = memo(({ widgetData, updateMockConfig, onDelete }:
   const totalDataPoints = dataRef.current.timestamps.length;
 
   return (
-    <div className="mb-6 p-4 block w-full relative">
+    <div className="mb-6 p-4 block w-full relative border border-red-500">
       <div className="sticky left-0 block w-[50vw] animate-none overscroll-contain z-40">
         <div className="flex items-center gap-2 mb-4">
           <h3 className="font-semibold">Mock Graph Container (Widget)</h3>