refactor: tweak styling

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss

@@ -33,6 +33,10 @@ $table-header-font-size: calc(1rem - 2px);
 .tableHeader,
 .eventRow {
   .indexColumn {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    
     min-width: 3em; // allow for 3-digit numbers
     text-align: right;
     font-weight: 400;
@@ -40,10 +44,11 @@ $table-header-font-size: calc(1rem - 2px);
     position: sticky;
     left: 0;
     z-index: 1;
-    background-color: $gray-1300;
+    background-color: $gray-1300; // will be overridden inline
   }
+
   .actionColumn {
-    width: 2rem;
+    width: calc(1.5rem + 0.5rem); // sm button size (--chakra-sizes-6) + 2 * padding
   }
 }
 
@@ -53,7 +58,8 @@ $table-header-font-size: calc(1rem - 2px);
   z-index: 10;
   background-color: $ui-black;
   font-size: $table-header-font-size;
-  color: $label-gray;}
+  color: $label-gray;
+}
 
 th {
   background-color: $gray-1300;

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

@@ -1,4 +1,5 @@
 import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
+import Color from 'color';
 
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
 
@@ -18,9 +19,6 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
   const ownRef = useRef<HTMLTableRowElement>(null);
   const [isVisible, setIsVisible] = useState(false);
 
-  const textColour = getAccessibleColour(colour);
-  const bgColour = textColour.backgroundColor;
-
   useLayoutEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -48,13 +46,16 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
     };
   }, [ownRef, selectedRef]);
 
+  const { color, backgroundColor } = getAccessibleColour(colour);
+  const mutedText = Color(color).fade(0.4).hexa();
+
   return (
     <tr
       className={cx([style.eventRow, skip ?? style.skip])}
       style={{ opacity: `${isPast ? '0.2' : '1'}` }}
       ref={selectedRef ?? ownRef}
     >
-      <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour.color }}>
+      <td className={style.indexColumn} style={{ backgroundColor, color: mutedText }}>
         {showIndexColumn && eventIndex}
       </td>
       {isVisible ? children : null}

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

@@ -22,7 +22,8 @@ const MultiLineCell = (props: MultiLineCellProps) => {
       inputref={ref}
       rows={1}
       size='sm'
-      style={{ padding: 0 }}
+      padding={0}
+      fontSize='1rem'
       transition='none'
       variant='ontime-transparent'
       value={value}