EPMRPP-117343 || Fix modal scrollbar overlap

[allaprischepa]

Changes

1. Added classes for rc-scrollbar wrappers and set z-indexes

Visuals

Before:

After:

Summary by CodeRabbit

• Bug Fixes
  • Improved scrolling behavior in modals so scroll content and scrollbars layer correctly.
  • Fixed visual overlap issues that could affect interaction with scrollable modal content.

[coderabbitai]

Walkthrough

This change adds z-index CSS rules for scrollbar view and track elements in the modal stylesheet, and updates the Modal component to apply these custom class names to the Scrollbars component's view, trackHorizontal, and trackVertical elements.

Changes

Scrollbars z-index layering

Layer / File(s)	Summary
CSS classes and Modal wiring src/components/modal/modal.module.scss, src/components/modal/modal.tsx	Adds .scrollbars-scroll-view (z-index 101) and .scrollbars-scroll-track (z-index 100) classes, and configures the Scrollbars component's classes prop to use these for view, trackHorizontal, and trackVertical.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Estimated code review effort: 1 (Trivial) | ~5 minutes

Poem

A rabbit hopped through scrollbar lanes,
Stacking z-index to end the pains,
View above track, now clear and bright,
No more overlap, everything's right! 🐇✨

🚥 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 clearly describes the main change: fixing modal scrollbar overlap.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch bugfix/EPMRPP-117343-fix-modal-scrollbar-overlap

---

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

[coderabbitai]

🧹 Nitpick comments (1)

src/components/modal/modal.module.scss (1)

81-88: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider naming these values via a shared z-index scale.

z-index: 101 and z-index: 100 are magic numbers local to this file. If other components in the modal stack (overlay, header, dropdown portals) also hardcode arbitrary z-index values, future collisions are hard to reason about.

🤖 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 `@src/components/modal/modal.module.scss` around lines 81 - 88, The modal
scroll view and track are using hardcoded z-index magic numbers, which should be
replaced with shared named values from a common z-index scale. Update the styles
for .scrollbars-scroll-view and .scrollbars-scroll-track to reference the
project’s centralized z-index tokens/variables, and align them with any existing
modal-layer constants so components like the overlay, header, and dropdown
portals use a consistent stacking scheme.

🤖 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 `@src/components/modal/modal.module.scss`:
- Around line 81-88: The modal scroll view and track are using hardcoded z-index
magic numbers, which should be replaced with shared named values from a common
z-index scale. Update the styles for .scrollbars-scroll-view and
.scrollbars-scroll-track to reference the project’s centralized z-index
tokens/variables, and align them with any existing modal-layer constants so
components like the overlay, header, and dropdown portals use a consistent
stacking scheme.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6907bb65-f026-4a14-9a58-93f589cae913

📥 Commits

Reviewing files that changed from the base of the PR and between 536ae82 and 1bce4ee.

📒 Files selected for processing (2)

• src/components/modal/modal.module.scss
• src/components/modal/modal.tsx