refactor: small style tweaks

refactor: consistent font size on inputs

refactor: style tweaks for block spacing

refactor: improve skipped styles

fix: improve responsiveness in extracted rundown

refactor: style tweaks to overview

refactor: simplify group target duration

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

@@ -202,7 +202,7 @@ export function OffsetOverview() {
 
   const isPlaying = isPlaybackActive(playback);
   const correctedOffset = offset * -1;
-  const offsetState = getOffsetState(offset);
+  const offsetState = getOffsetState(isPlaying ? offset : null);
   const offsetText = getOffsetText(isPlaying ? correctedOffset : null);
 
   return <OverUnder state={offsetState} value={offsetText} testId='offset' />;

apps/client/src/features/overview/composite/TimeLayout.module.scss

@@ -9,14 +9,11 @@
   letter-spacing: 0.5px;
   min-width: 5em;
   font-variant-numeric: tabular-nums;
+  color: $ui-white;
 
   &::after {
     content: '\200b';
   }
-
-  &.muted {
-    color: $muted-gray;
-  }
 }
 
 .column {
@@ -32,7 +29,7 @@
     gap: 0.25rem;
   }
 
-  &[data-state="over"] {
+  &[data-state='over'] {
     .label .over {
       color: $playback-over;
     }
@@ -41,7 +38,7 @@
     }
   }
 
-  &[data-state="under"] {
+  &[data-state='under'] {
     .label .under {
       color: $playback-under;
     }
@@ -50,7 +47,7 @@
     }
   }
 
-  &[data-state="muted"] {
+  &[data-state='muted'] {
     .clock {
       color: $muted-gray;
     }

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

@@ -13,9 +13,9 @@ interface TimeLayoutProps {
 
 export function TimeColumn({ label, value, muted, className, testId }: TimeLayoutProps) {
   return (
-    <div className={style.column}>
+    <div className={style.column} data-state={muted ? 'muted' : 'active'}>
       <span className={style.label}>{label}</span>
-      <span className={cx([style.clock, muted && style.muted, className])} data-testid={testId}>
+      <span className={cx([style.clock, className])} data-testid={testId}>
         {value}
       </span>
     </div>