Guidelines for z-index Usage and Standardization

[sgraband]

Feature Description:

We should establish comprehensive guidelines for the usage of z-index values across our project to ensure consistency and maintainability. The goal is to create a clear mapping of z-index ranges for different UI components. So as an example (list to be extended and adjusted):

Base Layer: 0-100
Side Panels: 500-600
Modal Dialogs: 700-800
Menus: 800-900
Hover Elements: 1000+

Additionally, we need to consider z-index values from third-party libraries, such as the Monaco Editor, to prevent conflicts, by either overwriting them or cosnidering their values as given.

TODO:

• Propose and finalize z-index ranges: Collaborate on determining specific ranges for different UI components.
• Establish as variables: Implement these z-index values as variables (possibly in a CSS/SCSS file) so they can be reused throughout the application, allowing for easier adjustments.
• Review existing z-index usages: Create a pull request to adjust all current z-index values according to the new guidelines, ensuring we identify any components that might have inappropriate default values.

Please share your suggestions or additional z-index ranges you think are necessary!

[sdirix]

The suggested process makes sense to me. The agreed upon guidelines should be documented somewhere then, for example in the coding guidelines.

[Alexander-Taran]

Things to consider (maybe):

Dialogs: <dialog>.showDialog()
Hovers: <... popover='hint' ...>.showPopover({source: initiatingElement}) + position-anchor

web standards ftw albeit {source:..} and position-anchor did not land everywhere yet.