search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
820 stars 166 forks source link

Examples toolbar hides bottom content of tall examples #5283

Closed jmuzina closed 3 weeks ago

jmuzina commented 1 month ago

When viewing an example that is taller than the viewport (i.e. forms combined), the examples toolbar hides some content behind it.

Screenshot 2024-08-07 at 1 05 42 PM

This isn't a problem in Percy, as the toolbar is hidden for Percy tests. However it makes it hard to see what's behind the toolbar on a browser.

We should either adjust the page height to make room for the toolbar, or display the settings some other way (like a modal / aside).

syncronize-issues-to-jira[bot] commented 1 month ago

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-13996.

This message was autogenerated

bartaz commented 1 month ago

I noticed this as well when working with navigation.

In most cases (long content) adding some margin bottom on body would be sufficient, so you can scroll past this. But in case of navigation on mobile, its position is fixed, so it won't help.

Moving the toolbar to some other place also only partially solves the problem (it will still cover some part of the screen).

I guess we need some way to hide/toggle this toolbar. A simpler approach would be to just allow closing it, and reload to make it reappear. Because if we want to be able to really toggle it, there would still be a need for some "collapsed" view that can be expanded.