Skip to content

improvement(files): match CSV/XLSX preview tables to the markdown table chrome - #6125

Merged
waleedlatif1 merged 2 commits into
stagingfrom
worktree-csv-table-md-chrome
Jul 31, 2026
Merged

improvement(files): match CSV/XLSX preview tables to the markdown table chrome#6125
waleedlatif1 merged 2 commits into
stagingfrom
worktree-csv-table-md-chrome

Conversation

@waleedlatif1

Copy link
Copy Markdown
Collaborator

Summary

  • Tables in the file viewer looked different depending on the file — CSV/XLSX previews had their own chrome (rounded outer frame, --surface-2 header, 13px body / 12px header, --text-secondary cells) while markdown files rendered tables through the rich markdown editor (full cell borders on --divider, --surface-4 header, 14px text)
  • Extracted the markdown table chrome into a shared document-table.css and styled both surfaces from it; removed the custom DataTable styling
  • The editor stylesheet keeps only its own concerns (table-layout: fixed for column resizing, prose block margin, cell paragraph reset); DataTable keeps only its edit affordances
  • Added a jsdom test that loads the real shipped CSS and asserts the two surfaces resolve to the same cell padding/typography and are bordered/filled by one rule, so they can't drift again

Type of Change

  • Bug fix

Testing

vitest file-viewer suite (575 tests) + typecheck green. New parity test verified to fail when the shared rule drops the prose selector, and when the editor stylesheet re-declares cell chrome.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

…le chrome

Tables in the file viewer looked different depending on the file: CSV and XLSX previews rendered their own chrome (rounded outer frame, --surface-2 header, 13px body / 12px header, --text-secondary cells) while markdown files rendered tables through the rich markdown editor (full cell borders on --divider, --surface-4 header, 14px text).

Extract the markdown table chrome into document-table.css and style both surfaces from it. The editor stylesheet keeps only its own concerns (fixed layout for column resizing, prose block margin, cell paragraph reset); DataTable keeps only its edit affordances.
@vercel

vercel Bot commented Jul 31, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Jul 31, 2026 7:22pm

Request Review

@cursor

cursor Bot commented Jul 31, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Presentation-only CSS consolidation in the file viewer with parity tests; no auth, data, or API changes.

Overview
CSV/XLSX previews and markdown tables in the file viewer now share one table look instead of divergent styling (preview-specific frame, smaller text, different header/cell colors).

Shared chrome lives in new document-table.css, imported by DataTable and the rich markdown editor. Duplicate table rules were removed from rich-markdown-editor.css; the editor keeps only table-specific behavior (table-layout: fixed, margins, cell paragraph reset). DataTable drops most Tailwind table styling and only adds edit hover/ring classes.

Regression guard: document-table.test.ts loads the real CSS and checks computed padding/typography parity plus a single shared rule for borders and header fill.

Reviewed by Cursor Bugbot for commit 3089ea8. Configure here.

@greptile-apps

greptile-apps Bot commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

Consolidates CSV, XLSX, and markdown table presentation into shared styling.

  • Adds a common document-table.css stylesheet for cell borders, spacing, typography, wrapping, and header fill.
  • Removes duplicated table chrome from the data-table component and markdown-editor stylesheet while retaining surface-specific behavior.
  • Adds CSS parity tests covering both rendering surfaces.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/data-table.tsx Replaces preview-specific table utility classes with shared document-table styling while retaining edit affordances.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css Defines the shared table chrome used by CSV, XLSX, and rich-markdown surfaces.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.test.ts Verifies that both table surfaces resolve to the same typography, spacing, wrapping, borders, and header fill.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css Removes duplicated table chrome while retaining editor-specific layout and prose rules.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx Loads the shared table stylesheet before editor-specific styling.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx Loads the shared table stylesheet for standalone rich-markdown fields.

Reviews (2): Last reviewed commit: "fix(files): wrap unbreakable cell values..." | Re-trigger Greptile

…own 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.
@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 3089ea8. Configure here.

@waleedlatif1
waleedlatif1 merged commit 898a10d into staging Jul 31, 2026
27 checks passed
@waleedlatif1
waleedlatif1 deleted the worktree-csv-table-md-chrome branch July 31, 2026 19:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant