Skip to content

fix: redundant/double scrollbar in bottom sheet (e.g. MCP view)#491

Draft
laileni-aws wants to merge 2 commits into
Amazon-Q-Developer:mainfrom
laileni-aws:fix/mcp-sheet-double-scrollbar
Draft

fix: redundant/double scrollbar in bottom sheet (e.g. MCP view)#491
laileni-aws wants to merge 2 commits into
Amazon-Q-Developer:mainfrom
laileni-aws:fix/mcp-sheet-double-scrollbar

Conversation

@laileni-aws

Copy link
Copy Markdown
Contributor

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 to overflow-y: auto so a scrollbar only appears when the content actually overflows.

Problem

When opening a panel rendered in the sheet (for example the MCP view):

  1. The sheet body (.mynah-sheet-body) has overflow-y: scroll, so it always shows a scrollbar.
  2. Its content includes an inner scrollable list (.mynah-detailed-list, overflow-y: auto) that shows its own scrollbar when the list overflows.
  3. The result is two vertical scrollbars on the right — one for the list content and a redundant one wrapping the entire panel — plus a permanently visible (often empty) scrollbar even when nothing overflows.

The fullscreen sheet variant (.mynah-sheet-fullscreen) had the same overflow-y: scroll, producing a permanent scrollbar as well.

Fix

In src/styles/components/_sheet.scss, change overflow-y: scroll to overflow-y: auto for both .mynah-sheet-body and .mynah-sheet-fullscreen.

auto renders the scrollbar only when the content exceeds the available height, so:

  • the redundant outer scrollbar no longer appears alongside the inner list's scrollbar, and
  • no empty scrollbar is shown when the content fits.

Testing

  • npm run build compiles the styles successfully.
  • Full unit test suite passes (npx jest): 842 tests.
  • eslint and prettier --check pass.
  • This is a CSS-only change; there are no existing end-to-end snapshots that capture the sheet, so no screenshot baselines are affected.

Additional change

  • ui-tests/__test__/flows/quick-action-commands-header.ts: coerced the result of a Playwright evaluate call to a boolean with Boolean(...) before using it in a condition, satisfying @typescript-eslint/strict-boolean-expressions and keeping the repo lint gate green.

Notes

  • Change is limited to sheet overflow styling; no public API or behavior changes beyond scrollbar visibility.

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