Allow resizing the final dataset table column

[giaphutran12]

Summary

• add right-side table gutter so the final dataset column has room to resize
• persist column widths when resizing ends, including mouseup outside the table

Rebased onto main after #84 merged.
Not stacked on #85.

Fixes #80.

Verification

• npm run lint -- --quiet in frontend
• NEXT_PUBLIC_CONVEX_URL=http://127.0.0.1:3210 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_dGVzdC5jbGVyay5hY2NvdW50cy5kZXYk npm run build in frontend
• browser QA with real DatasetTable static harness: dragged final Availability column from 180px to 310px, confirmed localStorage persisted Availability: 310, reloaded and confirmed width restored at 310px
• git diff --check

Notes

• This PR only touches frontend table resize behavior.
• Not stacked on Make populate status truthful #85.

[coderabbitai]

Warning

Review limit reached

@giaphutran12, we couldn't start this review because you've used your available PR reviews for now.

Your plan includes 2 reviews of capacity. Refill in 19 minutes and 23 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e9433223-b1f0-4532-b193-c93a72f63bcd

📥 Commits

Reviewing files that changed from the base of the PR and between 4b141b9 and d1b16d6.

📒 Files selected for processing (1)

• frontend/components/table/DatasetTable.tsx

📝 Walkthrough

Walkthrough

DatasetTable adds layout refinements for column resizing. A new LAST_COLUMN_RESIZE_GUTTER constant extends the computed table width to provide space for the last column resize handle. The component introduces a previousResizingColumnIdRef to track resize state transitions across renders. The core change replaces totalWidth with tableContentWidth (which includes the gutter) as the basis for the table's minimum width, and adds an effect that persists column width changes when a resize operation completes by comparing the current and previous resizing states. The wrapper element applies the new tableContentWidth instead of totalWidth.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: allowing resizing of the final dataset table column, which directly addresses the PR's core objective.
Description check	✅ Passed	The description is well-related to the changeset, covering the addition of a right-side table gutter, column width persistence, verification steps, and context about rebasing and stacking.
Linked Issues check	✅ Passed	The PR directly addresses issue #80 by implementing a right-side table gutter that allows the final column to be resized, which was the reported problem in the linked issue.
Out of Scope Changes check	✅ Passed	All changes are scoped to frontend table resize behavior as stated in the PR notes. The addition of LAST_COLUMN_RESIZE_GUTTER, tableContentWidth computation, and width persistence directly support the stated objective of enabling final column resizing.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/last-column-resize-pr2

---

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)

frontend/components/table/DatasetTable.tsx (1)

120-125: ⚡ Quick win

Consider removing the redundant onMouseUp handler.

The new effect (lines 120-125) correctly persists widths whenever resizing transitions to inactive, including when mouseup occurs outside the table (the PR's stated goal). The onMouseUp handler (lines 152-154) is now redundant—it attempts the same persistence but only when mouseup occurs inside the container. While the duplicate call is harmless (persistWidths is idempotent), removing the onMouseUp handler would improve clarity and avoid wasteful re-persistence.

🧹 Proposed cleanup

     style={{ fontSize: "13px" }}
-    onMouseUp={() => {
-      if (resizingColumnId) persistWidths();
-    }}
   >

Also applies to: 152-154

🤖 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 `@frontend/components/table/DatasetTable.tsx` around lines 120 - 125, The
useEffect watching resizingColumnId (which compares
previousResizingColumnIdRef.current to resizingColumnId and calls persistWidths)
makes the onMouseUp handler redundant; remove the onMouseUp prop/handler
attached to the container that only calls persistWidths on mouseup (lines
referencing the onMouseUp handler) so persistence is only performed by the
effect using previousResizingColumnIdRef, keeping persistWidths idempotent and
avoiding duplicate calls; ensure no other behavior was tied to that onMouseUp
before deleting it.

🤖 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 `@frontend/components/table/DatasetTable.tsx`:
- Around line 120-125: The useEffect watching resizingColumnId (which compares
previousResizingColumnIdRef.current to resizingColumnId and calls persistWidths)
makes the onMouseUp handler redundant; remove the onMouseUp prop/handler
attached to the container that only calls persistWidths on mouseup (lines
referencing the onMouseUp handler) so persistence is only performed by the
effect using previousResizingColumnIdRef, keeping persistWidths idempotent and
avoiding duplicate calls; ensure no other behavior was tied to that onMouseUp
before deleting it.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c811f1fb-2481-4ec1-bf71-87d052faecfd

📥 Commits

Reviewing files that changed from the base of the PR and between 1e9cc8b and 4b141b9.

📒 Files selected for processing (1)

• frontend/components/table/DatasetTable.tsx

[simantak-dabhade]

LGTM