refactor: improve resizing of column

apps/client/src/features/cuesheet/Cuesheet.module.scss

@@ -50,9 +50,15 @@ $table-header-font-size: calc(1rem - 3px);
 
   font-size: $table-header-font-size;
   color: $gray-700;
+}
 
-  th {
-      background-color: $gray-1300;
+th {
+  background-color: $gray-1300;
+
+  &:hover {
+    .resizer {
+      width: 0.5rem;
+    }
   }
 }
 
@@ -126,30 +132,19 @@ $table-header-font-size: calc(1rem - 3px);
 
 .resizer {
   cursor: col-resize;
-  opacity: 0;
+  opacity: $opacity-disabled;
   display: inline-block;
-  width: 3px;
+  width: 0;
   height: 100%;
   position: absolute;
   right: 0;
   top: 0;
-  transform: translateX(50%);
   background-color: $action-blue;
 
   user-select: none;
   touch-action: none;
 
-  transition-duration: $transition-time-action;
-  transition-property: width, background-color;
-
   &:hover {
-    opacity: $opacity-disabled;
-    width: 6px;
-  }
-
-  &.isResizing {
     opacity: 1;
-    width: 6px;
-    background-color: $action-blue;
   }
 }

apps/client/src/features/cuesheet/cuesheet-table-elements/SortableCell.tsx

@@ -4,8 +4,6 @@ import { CSS } from '@dnd-kit/utilities';
 import { Header } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
 
-import { cx } from '../../../common/utils/styleUtils';
-
 import styles from '../Cuesheet.module.scss';
 
 interface SortableCellProps {
@@ -29,8 +27,6 @@ export function SortableCell({ header, style, children }: SortableCellProps) {
     transition,
   };
 
-  const resizerClasses = cx([styles.resizer, header.column.getIsResizing() ? styles.isResizing : null]);
-
   return (
     <th ref={setNodeRef} style={dragStyle} colSpan={colSpan}>
       <div {...attributes} {...listeners}>
@@ -41,7 +37,7 @@ export function SortableCell({ header, style, children }: SortableCellProps) {
           onMouseDown: header.getResizeHandler(),
           onTouchStart: header.getResizeHandler(),
         }}
-        className={resizerClasses}
+        className={styles.resizer}
       />
     </th>
   );