diff --git a/apps/client/src/features/cuesheet/Cuesheet.module.scss b/apps/client/src/features/cuesheet/Cuesheet.module.scss index dadb04e3e..a6b20136b 100644 --- a/apps/client/src/features/cuesheet/Cuesheet.module.scss +++ b/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; } } diff --git a/apps/client/src/features/cuesheet/cuesheet-table-elements/SortableCell.tsx b/apps/client/src/features/cuesheet/cuesheet-table-elements/SortableCell.tsx index f20535c21..07cb0509c 100644 --- a/apps/client/src/features/cuesheet/cuesheet-table-elements/SortableCell.tsx +++ b/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 (