refactor: align inputs with group, refs #1857

apps/client/src/common/components/tag/Tag.tsx

@@ -1,7 +1,11 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 
 import style from './Tag.module.scss';
 
-export default function Tag({ children }: { children: ReactNode }) {
+interface TagProps {
-  return <span className={style.tag}>{children}</span>;
+  className?: string;
+}
+
+export default function Tag({ className, children }: PropsWithChildren<TagProps>) {
+  return <span className={`${style.tag} ${className || ''}`}>{children}</span>;
 }

apps/client/src/features/rundown/rundown-group/RundownGroup.module.scss

@@ -57,29 +57,48 @@
 
   .metaRow {
     display: flex;
-    gap: 3rem;
+    gap: $block-clearance; // same as RundownEvent.eventTimers
     margin-bottom: 0.25rem;
+    padding-left: 0.25rem;
     white-space: nowrap;
   }
 
   .metaEntry {
-    width: 4.5em;
+    width: 8rem; // timeInput + button
 
-    :first-child {
+    &:first-of-type {
-      font-size: calc(1rem - 3px);
+      width: 4.5rem; // binder + buttons
-      color: $label-gray;
     }
   }
+
+  .metaLabel {
+    color: $muted-gray;
+    font-size: calc(1rem - 3px);
+  }
 }
 
 .strike {
-  text-decoration: line-through;
+  text-decoration: wavy underline;
+  margin-right: 0.25rem;
+  color: $ui-white;
 }
 .over {
   color: $playback-over;
+  .strike {
+    text-decoration-color: $playback-over;
+  }
+  .offsetLabel {
+    background-color: $playback-over;
+  }
 }
 .under {
   color: $playback-under;
+  .strike {
+    text-decoration-color: $playback-under;
+  }
+  .offsetLabel {
+    background-color: $playback-under;
+  }
 }
 
 .drag {

apps/client/src/features/rundown/rundown-group/RundownGroup.tsx

@@ -13,6 +13,7 @@ import { EntryId, OntimeGroup } from 'ontime-types';
 import { MILLIS_PER_MINUTE, millisToString } from 'ontime-utils';
 
 import IconButton from '../../../common/components/buttons/IconButton';
+import Tag from '../../../common/components/tag/Tag';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
@@ -162,30 +163,28 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
         </div>
         <div className={style.metaRow}>
           <div className={style.metaEntry}>
-            <div>Start</div>
+            <div className={style.metaLabel}>Entries</div>
+            <div>{data.entries.length}</div>
+          </div>
+          <div className={style.metaEntry}>
+            <div className={style.metaLabel}>Start</div>
             <div>{millisToString(data.timeStart, { fallback: timerPlaceholder })}</div>
           </div>
           <div className={style.metaEntry}>
-            <div>End</div>
+            <div className={style.metaLabel}>End</div>
             <div>{millisToString(data.timeEnd, { fallback: timerPlaceholder })}</div>
           </div>
           <div className={style.metaEntry}>
-            <div>Duration</div>
+            <div className={style.metaLabel}>Duration</div>
             {planOffset === null ? (
-              <div className={cx([planOffsetLabel !== null && style[planOffsetLabel]])}>
+              <div>{formatDuration(data.duration)}</div>
-                {formatDuration(data.duration)}
-              </div>
             ) : (
-              <div>
+              <div className={cx([planOffsetLabel && style[planOffsetLabel]])}>
                 <span className={style.strike}>{formatDuration(data.duration)}</span>
-                <span className={cx([planOffsetLabel !== null && style[planOffsetLabel]])}>{planOffset}</span>
+                <Tag className={style.offsetLabel}>{planOffset}</Tag>
               </div>
             )}
           </div>
-          <div className={style.metaEntry}>
-            <div>Entries</div>
-            <div>{data.entries.length}</div>
-          </div>
         </div>
       </div>
     </div>