diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableCell.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableCell.tsx index 9eccf566c..9ca9ce21a 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableCell.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableCell.tsx @@ -69,6 +69,7 @@ function EditableCell({ initialValue, multiline, fieldId, fieldLabel, handleUpda onClick={enterEdit} onFocus={enterEdit} multiline={multiline} + topAligned aria-label={fieldLabel ? `${fieldLabel} cell` : undefined} > {initialValue} diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss index 7287229a9..68ec5ec18 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss @@ -35,9 +35,16 @@ cursor: text; } + // single-line placeholder: keep the glyph in a 2rem band at the top of the cell so it lines up + // with the editor (which mounts top-aligned) and does not jump when the cell is taller than 2rem + &.topAligned:not(.multiline) { + align-items: flex-start; + line-height: 2rem; + } + &.multiline { height: auto; - min-height: 2rem; + min-height: 100%; // fill the cell so the whole area is clickable (grows with content) text-wrap: wrap; white-space: break-spaces; overflow: hidden; diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx index 73e33bae0..08877ae10 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx @@ -9,11 +9,22 @@ interface TextLikeInputProps extends HTMLAttributes { muted?: boolean; disabled?: boolean; multiline?: boolean; + /** keep the content at the top of the cell (matches an editor that mounts top-aligned) */ + topAligned?: boolean; } const TextLikeInput = forwardRef( ( - { offset, muted, disabled, multiline, children, className, ...elementProps }: PropsWithChildren, + { + offset, + muted, + disabled, + multiline, + topAligned, + children, + className, + ...elementProps + }: PropsWithChildren, textRef, ) => { const ref = useRef(null); @@ -23,6 +34,7 @@ const TextLikeInput = forwardRef( muted && style.muted, disabled && style.disabled, multiline && style.multiline, + topAligned && style.topAligned, className, ]);