Skip to content

fix(examples): avoid clipping select dropdowns in landscape controls#8715

Merged
mvaligursky merged 1 commit into
mainfrom
mv-examples-control-panel-dropdown-clip
May 11, 2026
Merged

fix(examples): avoid clipping select dropdowns in landscape controls#8715
mvaligursky merged 1 commit into
mainfrom
mv-examples-control-panel-dropdown-clip

Conversation

@mvaligursky

Copy link
Copy Markdown
Contributor

Follow-up to #8707: scrolling the whole .pcui-panel-content clipped PCUI SelectInput menus (they use position: absolute inside the overflow region). Examples with only Active Device (e.g. loaders/bundle) showed an empty-looking dropdown until the panel was scrolled.

Changes:

  • Wrap landscape renderControls() in #controlPanel-scroll-region so only example parameters scroll.
  • Keep the device selector above that region; use flex layout + min-height: 0 so the scroll area still fills remaining height when the panel hits its max height.
  • Set #controlPanel.landscape to overflow: visible and cap height with max-height: min(calc(100% - 16px), calc(100vh - 48px)) so tall control lists remain usable on short viewports.

Note: SelectInput controls that live inside a long, scrolled .controls.mjs panel can still be clipped if their list opens past the bottom of #controlPanel-scroll-region; fixing that would require rendering the list outside the scroll subtree (e.g. PCUI portal/fixed overlay).

Scroll only the example controls region so the Active Device (and other
non-controls UI) stays outside overflow-y, restoring uncropped dropdowns
while keeping long parameter lists scrollable.
@mvaligursky mvaligursky self-assigned this May 11, 2026
@mvaligursky mvaligursky merged commit fc2696a into main May 11, 2026
8 checks passed
@mvaligursky mvaligursky deleted the mv-examples-control-panel-dropdown-clip branch May 11, 2026 11:42
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