show relative in offset overview

apps/client/src/common/hooks/useSocket.ts

@@ -160,7 +160,7 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) =
 
   numEvents: state.runtime.numEvents,
   selectedEventIndex: state.runtime.selectedEventIndex,
-  offset: state.runtime.offset,
+  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
 
   currentBlock: state.currentBlock,
 }));

apps/client/src/features/overview/Overview.tsx

@@ -170,7 +170,7 @@ function RuntimeOverview() {
 
   return (
     <>
-      <TimeColumn label='Offset' value={offsetText} className={offsetClasses} />
+      <TimeColumn label='Offset' value={offsetText} className={offsetClasses} testId='offset' />
       <TimeColumn label='Time now' value={formatedTime(clock)} />
     </>
   );

apps/client/src/features/overview/composite/TimeLayout.tsx

@@ -10,13 +10,16 @@ interface TimeLayoutProps {
   muted?: boolean;
   daySpan?: number;
   className?: string;
+  testId?: string;
 }
 
-export function TimeColumn({ label, value, muted, className }: TimeLayoutProps) {
+export function TimeColumn({ label, value, muted, className, testId }: TimeLayoutProps) {
   return (
     <div className={style.column}>
       <span className={style.label}>{label}</span>
-      <span className={cx([style.clock, muted && style.muted, className])}>{value}</span>
+      <span className={cx([style.clock, muted && style.muted, className])} data-testid={testId}>
+        {value}
+      </span>
     </div>
   );
 }