Sidebar class is not usable on mobile

[FlorianJacta]

Issue

The 'sidebar' class name from the stylekit will make the app unusable. The user only sees on the page the sidebar. The second column is not visible.

from taipy.gui import Gui

page = """<|toggle|theme|>

<page|layout|columns=300px 1fr|
<|sidebar|
### Sidebar
|>

<|container|
# Container
|>
|page>
"""

if __name__ == "__main__":
    Gui(page=page).run(margin="0px")

Expected behavior

We should see both columns (maybe one after the other).

Environment

Taipy 3.0.0

[FredLL-Avaiga]

@FlorianJacta Have you tried columns[mobile] ?

<page|layout|columns=300px 1fr|columns[mobile]=50vw 1fr|

[FlorianJacta]

This is working

[FlorianJacta]

I changed the style with:

.sidebar{
    position: relative;
    height: auto;
}

It seems to work fine with a lot of use cases.

[FlorianJacta]

If this answers all the issues about the sidebar, I think this should be the default behavior of the sidebar. This is necessary for mobiles.

[FredLL-Avaiga]

sticky is very different from relative !

[FlorianJacta]

I know, but I thnk we need a solution.

[FlorianJacta]

Or maybe something like this:

.css-75cauk .sidebar{
    height: auto;
}