fix(tables): use overflow-clip on header text to allow horizontal scrolling

[waleedlatif1]

Summary

• Replace truncate (overflow: hidden) with overflow-clip text-ellipsis whitespace-nowrap on table header text spans
• overflow: hidden creates a scroll port that traps horizontal wheel events, preventing scrolling when hovering over header text

Type of Change

• Bug fix

Testing

Tested manually

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)

[cursor]

PR Summary

Low Risk
Low risk UI-only styling change: updates header text overflow behavior to prevent wheel events from being captured while hovering column names.

Overview
Fixes table header horizontal scrolling by replacing header label truncate styling with overflow-clip text-ellipsis whitespace-nowrap in ColumnHeaderMenu, so long column names no longer create an overflow-hidden scroll port that traps horizontal wheel events.

^{Written by Cursor Bugbot for commit fefe8c4. Configure here.}

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 23, 2026 9:49pm

[greptile-apps]

Greptile Summary

This PR fixes a horizontal scroll issue in the tables view by replacing Tailwind's truncate utility (overflow: hidden) with overflow-clip text-ellipsis whitespace-nowrap (overflow: clip) on column header text spans.

Key changes:

• Both the read-only and interactive ColumnHeaderMenu header text spans in table.tsx are updated from truncate to overflow-clip text-ellipsis whitespace-nowrap.
• overflow: hidden creates a Block Formatting Context (BFC) / scroll container that consumes horizontal wheel events before they can bubble up to the parent table, effectively trapping scroll input. overflow: clip clips content visually in the same way but does not create a scroll container, so wheel events propagate normally.
• All prior truncate usages in the file are gone — no missed instances.

Confidence Score: 5/5

• Safe to merge — targeted one-file CSS fix with correct reasoning and no remaining truncate usages.
• The change is minimal, well-understood, and directly addresses the root cause. overflow: clip is the correct CSS primitive to prevent scroll-event trapping while preserving visual clipping. Both affected branches (readOnly and interactive) are consistently updated, and no regressions are introduced.
• No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx	Two column header <span> elements have truncate replaced with overflow-clip text-ellipsis whitespace-nowrap to prevent overflow: hidden from creating a scroll container that traps horizontal wheel events. Both the readOnly and interactive branches are updated consistently, and no other truncate usages remain in the file.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User scrolls horizontally over table header] --> B{Header text span overflow style}
    B -->|Before: overflow: hidden| C[Span creates scroll container / BFC]
    C --> D[Scroll event consumed by span]
    D --> E[❌ Parent table does NOT scroll]
    B -->|After: overflow: clip| F[Span clips content, NO scroll container]
    F --> G[Scroll event bubbles up normally]
    G --> H[✅ Parent table scrolls horizontally]

Loading

_{Reviews (1): Last reviewed commit: "fix(tables): use overflow-clip on header..." | Re-trigger Greptile}