diff --git a/src/frontend/src/components/editors/NotesEditor.css b/src/frontend/src/components/editors/NotesEditor.css new file mode 100644 index 0000000000..35b2cc8f5e --- /dev/null +++ b/src/frontend/src/components/editors/NotesEditor.css @@ -0,0 +1,68 @@ +/* Table styles for the Tiptap notes editor */ +.ProseMirror table { + border-collapse: collapse; + table-layout: fixed; + width: 100%; + overflow: hidden; + margin: 0; +} + +.ProseMirror table td, +.ProseMirror table th { + border: 1px solid var(--mantine-color-gray-4); + padding: 4px 8px; + vertical-align: top; + box-sizing: border-box; + position: relative; + min-width: 50px; +} + +[data-mantine-color-scheme='dark'] .ProseMirror table td, +[data-mantine-color-scheme='dark'] .ProseMirror table th { + border-color: var(--mantine-color-dark-4); +} + +.ProseMirror table th { + background-color: var(--mantine-color-gray-1); + font-weight: bold; +} + +[data-mantine-color-scheme='dark'] .ProseMirror table th { + background-color: var(--mantine-color-dark-6); +} + +/* Selected cell highlight */ +.ProseMirror table .selectedCell::after { + content: ''; + position: absolute; + inset: 0; + background: var(--mantine-color-blue-1); + opacity: 0.4; + pointer-events: none; +} + +[data-mantine-color-scheme='dark'] .ProseMirror table .selectedCell::after { + background: var(--mantine-color-blue-9); +} + +/* Column resize handle */ +.ProseMirror table .column-resize-handle { + position: absolute; + right: -2px; + top: 0; + bottom: 0; + width: 4px; + background-color: var(--mantine-color-blue-5); + pointer-events: none; + cursor: col-resize; +} + +/* Scrollable wrapper for wide tables */ +.ProseMirror .tableWrapper { + overflow-x: auto; +} + +/* Resize cursor while dragging */ +.ProseMirror.resize-cursor { + cursor: col-resize; +} diff --git a/src/frontend/src/components/editors/NotesEditor.tsx b/src/frontend/src/components/editors/NotesEditor.tsx index ada6cab3fa..4d43d68fa1 100644 --- a/src/frontend/src/components/editors/NotesEditor.tsx +++ b/src/frontend/src/components/editors/NotesEditor.tsx @@ -12,6 +12,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; import { ResizableImage } from 'tiptap-extension-resizable-image'; import 'tiptap-extension-resizable-image/styles.css'; +import './NotesEditor.css'; import { ApiEndpoints } from '@lib/enums/ApiEndpoints'; import type { ModelType } from '@lib/enums/ModelType';