fix: Data browser table headers misaligned when scrolling horizontally

[mtrezza]

New Pull Request Checklist

• I am not disclosing a vulnerability.
• I am creating this PR in reference to an issue.

Issue Description

1. Open class and scroll to right.
2. Click on other class and headers appear are misaligned.

Approach

Improve pos calc.

Summary by CodeRabbit

• Style
  • Optimized CSS rendering performance and adjusted layout efficiency for data browser interface components.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

[coderabbitai]

📝 Walkthrough

Walkthrough

These changes apply CSS performance optimizations and layout adjustments across two component stylesheets. The DataBrowserHeaderBar display is changed from inline-block to block, width constraints are adjusted, and webkit-transform is replaced with will-change for transform optimization. Similar transform optimization is added to table rows.

Changes

Cohort / File(s)	Summary
CSS Performance & Layout Optimization src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss, src/dashboard/Data/Browser/Browser.scss	Display property changed from inline-block to block in .bar; width: max-content added alongside existing min-width: 100%; -webkit-transform: translate3d(0, 0, 0) replaced with will-change: transform in .bar; will-change: transform added to .tableRow for render optimization.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Both changes are straightforward CSS optimizations with no logic or behavioral impact
• Homogeneous pattern (same will-change: transform optimization applied consistently)
• No risk of breaking changes; minor styling and performance adjustments only

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is largely incomplete. While it includes the checklist and issue description, the 'Closes' field is unfilled, the Approach section is empty, and required TODOs are unchecked.	Fill in the 'Closes' issue reference, provide detailed explanation of the approach used to fix the misalignment, and check off or remove incomplete TODOs before merging.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main fix: addressing misaligned data browser table headers during horizontal scrolling, which matches the PR's core objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3a82b0b and 109ddb7.

📒 Files selected for processing (2)

• src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss (1 hunks)
• src/dashboard/Data/Browser/Browser.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Docker linux/amd64

🔇 Additional comments (1)

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss (1)

18-20: width: max-content + min-width: 100% needs cross-browser verification.
This combo is likely the crux of the misalignment fix, but please sanity-check Safari/Firefox behavior for sticky elements (especially around overflow containers) and ensure it doesn’t introduce unexpected horizontal overflow or clipping.

---

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.}

[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.

[parseplatformorg]

🎉 This change has been released in version 8.2.0-alpha.5