Skip to content

Fix: Contain scroll behavior in Art Creator settings panel (LB-1953)#3670

Open
Gopal7387 wants to merge 1 commit intometabrainz:masterfrom
Gopal7387:feature/LB-1953-fix-settings-panel-scroll
Open

Fix: Contain scroll behavior in Art Creator settings panel (LB-1953)#3670
Gopal7387 wants to merge 1 commit intometabrainz:masterfrom
Gopal7387:feature/LB-1953-fix-settings-panel-scroll

Conversation

@Gopal7387
Copy link
Copy Markdown
Contributor

Summary

Fixes inconsistent scroll behavior in the Art Creator right settings panel where scrolling inside the panel would bleed into the main page scroll. LB-1953

Root Cause

Two things caused a problem with scrolling. .settings-navbar did not have a height set.
It used height: max-content from .sidebar which meant it did not have a boundary for scrolling.
As a result, when overscroll-behavior was triggered, there was nothing to hold it; scrolling events moved to the parent page easily.
This happened because the height was not defined properly, and the .settings-relied on .sidebar`, for its height, which caused issues with scrolling.

Fix

Two properties added to .settings-navbar in stats-art-creator.scss:
1.height: calc(100vh - 72px) gives the panel a fixed height matching the available viewport minus the navbar (72px), creating a real scroll container
2.overscroll-behavior: contain prevents scroll chaining once the panel hits its scroll limit

Files Changed

  • frontend/css/sass/stats-art-creator.scss : 2 lines added

Testing Done

  • Verified scroll stays contained inside the panel across all templates
  • Verified page does not scroll when panel reaches its top or bottom boundary and panel height flushes correctly with the viewport bottom
  • Verified behavior is consistent across Settings, Advanced, Show Caption, color controls, and shape options and independent scroll behavior even when main page is near its own scroll limit

AI Usage

If you did use AI:
[ ] I used AI tools for communication
[ ] I used AI tools for coding
[ ] I understand all the changes made in this PR
Hence i have not used any LLM as the issue is direct and minimal

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant