search

ramp4-pcar4 / ramp4-pcar4

RAMP 4 - The Reusable Accessible Mapping Platform, fourth major version
https://ramp4-pcar4.github.io/ramp4-pcar4/main/docs/
Other
16 stars 22 forks source link

Appbar overflow behavior on small layouts #2145

Open james-rae opened 6 months ago

james-rae commented 6 months ago

Description

Spotted by @celinaolivieri here https://github.com/ramp4-pcar4/ramp4-pcar4/pull/2083#issuecomment-1908761261

The initial report made it seem like it was a browser specific problem, but @szczz has been able to replicate in Chrome as well.

tl;dr If the appbar overflow menu has a scrollbar, the visual appearance of the overflow can jump from scrollable to fully expanded when using the scroll on the menu. Also sometimes the "scrollable" menu appears smaller than it would need to be given the available space (e.g. room for 4 icons but showing 1.5 icons and scroller).

Steps to reproduce

  1. Get things into the appbar (can fill with details, grid, layer settings, layer reorder)
  2. Reduce the height of the browser to shrink the window.
  3. Get the ... overflow icon to appear.
  4. Click the overflow to open the extended list. If the list doesn't have a scroller you need more icons or smaller window.
  5. Click the scroller arrow on the list.
  6. Watch the list change to different state.

Expected behavior

Something consistent, and that ensures the user can get to the icons.

Additional information

@szczz hypothesizes that it may be a combination of available vertical space and the popup library behavior.

Related issues

https://github.com/ramp4-pcar4/ramp4-pcar4/issues/1866 https://github.com/ramp4-pcar4/ramp4-pcar4/issues/2106

szczz commented 6 months ago

Heres a gif of it occurring in Chrome chrome

@szczz hypothesizes that it may be a combination of available vertical space and the popup library behavior.

popper** js