[Epic]: Standardized approach for Popups / Menus / Dropdowns (design + impl) #19493
Description
Description
Currently we have various types of popups regarding both design and implementation. They differ in various ways: sizing, positioning, scrollbar position etc.
The variants that we want to use should be well defined in Figma, including scalability (different look/behavior depending on screen size, orientation etc.)
Elements that should be taken into account:
- minimal and maximal width / height
- minimal margins
- additional decoration on top (like account selector)
- internal margins
- scroll bar position
- scrolling behavior (well defined cut-off lines on top/bottom)
- behaviors of multiple popups
- sizing/behavior of multi-page popups (where the content size may vary from page to page)
Examples of existing problems that should be addressed (for desktop):
- "artificial" cut-off line, the content should be visible till the separator line (or maybe same gradient used):
- no top margin:
- not centered position (may require resizing window to reproduce):
- inconsistent look of scroll bar, abruptly disappearing delegates in the bottom part when scrolling:
- inconsistent paddings:
