Eng 1801: query builder column resize lag

[sid597]

---

Summary by CodeRabbit

Bug Fixes

• Improved table column resizing behavior with enhanced responsiveness and reliability
• Column width preferences are now automatically saved and restored

[linear-code]

ENG-1801

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
discourse-graph	Skipped		Jun 15, 2026 9:23am

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[sid597]

@coderabbitai full review

[coderabbitai]

✅ Action performed

Full review finished.

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaces HTML drag-and-drop column resizing in ResultsTable.tsx with Pointer Events handlers (onPointerDown/Move/Up/Cancel/LostPointerCapture). Introduces a new DragInfo state model tracking pointer id and header start widths, and adds a body.roamjs-query-column-resizing CSS class to enforce the resize cursor and suppress text selection.

Changes

Pointer Events Column Resizing

Layer / File(s)	Summary
DragInfo model, constants, and resize CSS apps/roam/src/components/results-view/ResultsTable.tsx, apps/roam/src/styles/styles.css	Adds COLUMN_RESIZING_CLASSNAME and MIN_COLUMN_WIDTH constants; replaces the legacy drag metadata shape with a pointer-centric DragInfo model (pointerId, movement state, left/right header elements, starting widths) and a getInitialDragInfo initializer; adds the body.roamjs-query-column-resizing CSS rule that sets ew-resize cursor and user-select: none.
Pointer resize lifecycle handlers apps/roam/src/components/results-view/ResultsTable.tsx	Implements onResizeStart (sets pointer capture, adds body CSS class), onResize (adjusts header widths from pointer delta), finishResize (releases capture, removes CSS class, computes final width percentages with minimum-percent constraint, persists to Roam layout via setInputSettings), onResizeEnd, onResizeLostPointerCapture, and an unmount cleanup useEffect that removes the body CSS class.
Component props and JSX handle wiring apps/roam/src/components/results-view/ResultsTable.tsx	Updates ResultRowProps to declare four pointer-resize handler props; adjusts ResultRow destructuring; replaces the resize handle element's draggable/drag-event attributes with pointer event handlers and touchAction: "none"; updates the ResultRow call site to pass the new handlers.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• DiscourseGraphs/discourse-graph#270: Modifies the same ResultsTable.tsx column-resizing logic and handler lifecycle, establishing the drag-based resizing that this PR replaces with Pointer Events.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change: fixing column resize lag in the query builder, which aligns with the PR's focus on reworking table column resizing from HTML drag-and-drop to Pointer Events-based approach.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/roam/src/styles/styles.css (1)

39-43: 💤 Low value

Consider adding !important to user-select for consistency.

The cursor property uses !important to ensure it overrides element-specific styles, but user-select: none doesn't. If any child element has an explicit user-select value, text selection during resize could still occur.

Suggested change

 body.roamjs-query-column-resizing,
 body.roamjs-query-column-resizing * {
   cursor: ew-resize !important;
-  user-select: none;
+  user-select: none !important;
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/roam/src/styles/styles.css` around lines 39 - 43, The user-select
property in the body.roamjs-query-column-resizing and
body.roamjs-query-column-resizing * selector lacks the !important flag while
cursor: ew-resize has it. Add !important to the user-select: none declaration
for consistency, ensuring child elements cannot override the selection
restriction during column resizing operations.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/roam/src/styles/styles.css`:
- Around line 39-43: The user-select property in the
body.roamjs-query-column-resizing and body.roamjs-query-column-resizing *
selector lacks the !important flag while cursor: ew-resize has it. Add
!important to the user-select: none declaration for consistency, ensuring child
elements cannot override the selection restriction during column resizing
operations.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 104be335-338c-4399-80fd-089acf18f8c9

📥 Commits

Reviewing files that changed from the base of the PR and between 7195930 and 6ce9a03.

📒 Files selected for processing (2)

• apps/roam/src/components/results-view/ResultsTable.tsx
• apps/roam/src/styles/styles.css