fix: redundant/double scrollbar in bottom sheet (e.g. MCP view)#491
Draft
laileni-aws wants to merge 2 commits into
Draft
fix: redundant/double scrollbar in bottom sheet (e.g. MCP view)#491laileni-aws wants to merge 2 commits into
laileni-aws wants to merge 2 commits into
Conversation
The sheet body used overflow-y: scroll, which always renders a scrollbar even when the content fits. Combined with the inner scrollable list (e.g. the MCP view), this produced a second, redundant scrollbar wrapping the whole panel. Use overflow-y: auto so a scrollbar only appears when content actually overflows, for both the standard and fullscreen sheet.
Keeps the repo lint gate green (strict-boolean-expressions).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The bottom sheet (used for panels such as the MCP view) always rendered a vertical scrollbar because its scroll containers used
overflow-y: scroll. Combined with the inner scrollable list, this produced a redundant second scrollbar wrapping the whole panel (a "double scrollbar"), and left an empty scrollbar visible even when the content fit. This PR switches those containers tooverflow-y: autoso a scrollbar only appears when the content actually overflows.Problem
When opening a panel rendered in the sheet (for example the MCP view):
.mynah-sheet-body) hasoverflow-y: scroll, so it always shows a scrollbar..mynah-detailed-list,overflow-y: auto) that shows its own scrollbar when the list overflows.The fullscreen sheet variant (
.mynah-sheet-fullscreen) had the sameoverflow-y: scroll, producing a permanent scrollbar as well.Fix
In
src/styles/components/_sheet.scss, changeoverflow-y: scrolltooverflow-y: autofor both.mynah-sheet-bodyand.mynah-sheet-fullscreen.autorenders the scrollbar only when the content exceeds the available height, so:Testing
npm run buildcompiles the styles successfully.npx jest): 842 tests.eslintandprettier --checkpass.Additional change
ui-tests/__test__/flows/quick-action-commands-header.ts: coerced the result of a Playwrightevaluatecall to a boolean withBoolean(...)before using it in a condition, satisfying@typescript-eslint/strict-boolean-expressionsand keeping the repo lint gate green.Notes