Skip to content

Commit 3089ea8

Browse files
committed
fix(files): wrap unbreakable cell values in preview tables like markdown does
The markdown prose root sets overflow-wrap: anywhere; the preview root did not, so with whitespace-nowrap gone a long URL or hash in a CSV cell would overflow instead of breaking.
1 parent a79b9db commit 3089ea8

2 files changed

Lines changed: 21 additions & 3 deletions

File tree

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@
66
* resizing, cell paragraph reset) stay in rich-markdown-editor.css.
77
*/
88

9+
/* `overflow-wrap` matches what `.rich-markdown-prose` sets on its own root: cells hold arbitrary
10+
file data, so an unbreakable token (a URL, a hash) must break rather than overflow its cell. */
911
.document-table {
1012
color: var(--text-primary);
13+
overflow-wrap: anywhere;
1114
}
1215

1316
.rich-markdown-prose table,

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.test.ts

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ afterEach(() => {
5252
containers = []
5353
})
5454

55-
/** Mounts a one-cell table inside `rootClass` and returns its `th` and `td`. */
56-
function mountTable(rootClass: string): { th: HTMLElement; td: HTMLElement } {
55+
/** Mounts a one-cell table inside `rootClass` and returns the root plus its `th` and `td`. */
56+
function mountTable(rootClass: string): { root: HTMLElement; th: HTMLElement; td: HTMLElement } {
5757
const container = document.createElement('div')
5858
container.className = rootClass
5959
container.innerHTML =
@@ -63,7 +63,7 @@ function mountTable(rootClass: string): { th: HTMLElement; td: HTMLElement } {
6363
const th = container.querySelector('th')
6464
const td = container.querySelector('td')
6565
if (!th || !td) throw new Error('table cells not found')
66-
return { th, td }
66+
return { root: container, th, td }
6767
}
6868

6969
function declarations(el: Element, props: readonly string[]): Record<string, string> {
@@ -100,6 +100,21 @@ describe('document-table chrome is shared with markdown tables', () => {
100100
)
101101
})
102102

103+
/**
104+
* Cells hold arbitrary file data, so an unbreakable token (a URL, a hash) must break rather than
105+
* overflow — the previews lost `whitespace-nowrap` and would otherwise have no wrapping rule at
106+
* all. `overflow-wrap` is inherited from each surface's root (jsdom does not propagate inherited
107+
* properties to descendants, so the roots are what can be asserted).
108+
*/
109+
it('both roots declare the same wrapping for unbreakable cell values', () => {
110+
const prose = mountTable('rich-markdown-prose')
111+
const preview = mountTable('document-table')
112+
113+
const wrap = getComputedStyle(prose.root).getPropertyValue('overflow-wrap')
114+
expect(wrap).toBe('anywhere')
115+
expect(getComputedStyle(preview.root).getPropertyValue('overflow-wrap')).toBe(wrap)
116+
})
117+
103118
it('the resolved values are the markdown editor values, not jsdom defaults', () => {
104119
const { th, td } = mountTable('document-table')
105120

0 commit comments

Comments
 (0)