fix: merge virtuoso and rundown styles

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -167,7 +167,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
               />
             );
           },
-          TableRow: ({ item: _item, ...virtuosoProps }) => {
+          TableRow: ({ item: _item, style: injectedStyles, ...virtuosoProps }) => {
             // eslint-disable-next-line react/destructuring-assignment
             const rowIndex = virtuosoProps['data-index'];
             const row = rows[rowIndex];
@@ -183,13 +183,16 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                   rowId={row.id}
                   rowIndex={row.index}
                   table={table}
+                  injectedStyles={injectedStyles}
                   {...virtuosoProps}
                 />
               );
             }
 
             if (isOntimeDelay(entry)) {
-              return <DelayRow key={key} duration={entry.duration} {...virtuosoProps} />;
+              return (
+                <DelayRow key={key} duration={entry.duration} injectedStyles={injectedStyles} {...virtuosoProps} />
+              );
             }
 
             if (isOntimeMilestone(entry)) {
@@ -204,6 +207,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                   rowId={row.id}
                   rowIndex={rowIndex}
                   table={table}
+                  injectedStyles={injectedStyles}
                   {...virtuosoProps}
                 />
               );
@@ -225,6 +229,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                 rowId={row.id}
                 rowIndex={rowIndex}
                 table={table}
+                injectedStyles={injectedStyles}
                 {...virtuosoProps}
               />
             );

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
@@ -7,9 +7,10 @@ import style from './DelayRow.module.scss';
 
 interface DelayRowProps {
   duration: number;
+  injectedStyles?: CSSProperties;
 }
 
-function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
+function DelayRow({ duration, injectedStyles, ...virtuosoProps }: DelayRowProps) {
   const hideDelays = usePersistedCuesheetOptions((state) => state.hideDelays);
 
   if (hideDelays || duration === 0) {
@@ -19,7 +20,7 @@ function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
   const delayTime = millisToDelayString(duration, 'expanded');
 
   return (
-    <tr className={style.delayRow} data-testid='cuesheet-delay' {...virtuosoProps}>
+    <tr className={style.delayRow} data-testid='cuesheet-delay' style={injectedStyles} {...virtuosoProps}>
       <td tabIndex={0}>{delayTime}</td>
     </tr>
   );

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { CSSProperties, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
@@ -26,6 +26,7 @@ interface EventRowProps {
   parent: EntryId | null;
   rowIndex: number;
   table: Table<ExtendedEntry<OntimeEntry>>;
+  injectedStyles?: CSSProperties;
 }
 
 export default function EventRow({
@@ -42,6 +43,7 @@ export default function EventRow({
   parent,
   rowIndex,
   table,
+  injectedStyles,
   ...virtuosoProps
 }: EventRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -81,6 +83,7 @@ export default function EventRow({
         parent && style.hasParent,
       ])}
       style={{
+        ...injectedStyles,
         opacity: `${isPast ? '0.2' : '1'}`,
         '--user-bg': groupColour ?? 'transparent',
       }}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
@@ -15,9 +16,18 @@ interface GroupRowProps {
   rowId: string;
   rowIndex: number;
   table: Table<ExtendedEntry>;
+  injectedStyles?: CSSProperties;
 }
 
-export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...virtuosoProps }: GroupRowProps) {
+export default function GroupRow({
+  groupId,
+  colour,
+  rowId,
+  rowIndex,
+  table,
+  injectedStyles,
+  ...virtuosoProps
+}: GroupRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
     cuesheetMode: AppMode.Edit,
     hideIndexColumn: false,
@@ -26,7 +36,12 @@ export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...v
   const openMenu = useCuesheetTableMenu((store) => store.openMenu);
 
   return (
-    <tr className={style.groupRow} style={{ '--user-bg': colour }} data-testid='cuesheet-group' {...virtuosoProps}>
+    <tr
+      className={style.groupRow}
+      style={{ ...injectedStyles, '--user-bg': colour }}
+      data-testid='cuesheet-group'
+      {...virtuosoProps}
+    >
       {cuesheetMode === AppMode.Edit && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
@@ -20,6 +21,7 @@ interface MilestoneRowProps {
   rowId: string;
   rowIndex: number;
   table: Table<ExtendedEntry>;
+  injectedStyles?: CSSProperties;
 }
 
 export default function MilestoneRow({
@@ -31,6 +33,7 @@ export default function MilestoneRow({
   rowId,
   rowIndex,
   table,
+  injectedStyles,
   ...virtuosoProps
 }: MilestoneRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -56,6 +59,7 @@ export default function MilestoneRow({
     <tr
       className={cx([style.milestoneRow, Boolean(parentBgColour) && style.hasParent])}
       style={{
+        ...injectedStyles,
         opacity: `${isPast ? '0.2' : '1'}`,
         '--user-bg': parentBgColour ?? 'transparent',
       }}