fix: Column resizing mouse cursor in data browser not visible in Safari browser

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Issue

Column resizing mouse cursor in data browser not visible in Safari browser

Tasks

• Add tests
• Add changes to documentation (guides, repository pages, in-code descriptions)

Summary by CodeRabbit

• Style

  • Refined drag handle positioning and visual styling in the data browser header.
  • Removed pointer cursor effect from header background.
  • Cleaned up rendering optimizations in header bar styling.

• Refactor

  • Simplified header drag handle implementation by consolidating styling approach and removing intermediate prop calculations.

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refactors the column drag handle implementation in the data browser, shifting handle positioning and styling from JavaScript-computed inline styles and props to CSS-based absolute positioning with conditional styling classes. The handleLefts prop is removed from DataBrowserHeaderBar.

Changes

Cohort / File(s)	Summary
Handle styling refactoring src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js, src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss	Replaced JavaScript-driven inline handle styles with CSS class-based styling; introduced handleClassName computed with conditional handleFreeze state; converted .handle from relative inline-block to absolutely positioned element with right-edge anchoring and col-resize cursor; removed webkit-transform workaround from .bar.
Header and prop cleanup src/dashboard/Data/Browser/BrowserTable.react.js	Removed handleLefts local variable and eliminated its propagation as a prop to DataBrowserHeaderBar, simplifying the header rendering pathway.
Header styling update src/components/DataBrowserHeader/DataBrowserHeader.scss	Removed explicit cursor: pointer; declaration from .header style.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• parse-community/parse-dashboard#2877: Adds column-freezing logic with handleLefts prop and sticky offsets; directly related as this PR removes that prop and converts to CSS-based positioning.
• parse-community/parse-dashboard#3067: Modifies .bar transform-related rules by removing webkit-transform and will-change declarations; shares the same styling refactoring pattern.
• parse-community/parse-dashboard#2878: Modifies DataBrowserHeaderBar component architecture and prop interface; touches the same header wiring and drag-handle implementation area.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description is missing the 'Approach' section which should explain the technical solution. It only identifies the issue but lacks explanation of how the changes fix the problem.	Add an 'Approach' section describing how the refactored handle styling and absolute positioning address the Safari cursor visibility issue.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main objective of the PR: fixing the column resizing cursor visibility issue in Safari by refactoring the drag handle styling approach.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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)

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js (1)

143-148: The key prop on DragHandle is redundant.

The key={'handle' + i} is unnecessary since DragHandle is a single element inside the parent div which already has a unique key (key={'header' + i}). Keys are used for React reconciliation of sibling elements in lists, not for single child elements.

♻️ Suggested fix

          <DragHandle
-           key={'handle' + i}
            className={handleClassName}
            onDrag={onResize.bind(null, i)}
            onClick={e => e.stopPropagation()}
          />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js` around
lines 143 - 148, Remove the redundant key prop on the DragHandle element inside
DataBrowserHeaderBar: delete the key={'handle' + i} attribute from the
DragHandle JSX (the parent div already uses key={'header' + i}), leaving
DragHandle with className={handleClassName}, onDrag={onResize.bind(null, i)} and
onClick handler unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js`:
- Around line 143-148: Remove the redundant key prop on the DragHandle element
inside DataBrowserHeaderBar: delete the key={'handle' + i} attribute from the
DragHandle JSX (the parent div already uses key={'header' + i}), leaving
DragHandle with className={handleClassName}, onDrag={onResize.bind(null, i)} and
onClick handler unchanged.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0ff5303 and 3e11613.

📒 Files selected for processing (4)

• src/components/DataBrowserHeader/DataBrowserHeader.scss
• src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
• src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
• src/dashboard/Data/Browser/BrowserTable.react.js

💤 Files with no reviewable changes (2)

• src/components/DataBrowserHeader/DataBrowserHeader.scss
• src/dashboard/Data/Browser/BrowserTable.react.js

[parseplatformorg]

🎉 This change has been released in version 9.1.0-alpha.6