fix sidebar view responsiveness issue #7815

[loldormy]

References

this fixes issue #7815

User-facing changes

When resizing the side panel on desktop, the last checkpoint widget hides now instead of wrapping and pushing the logo down.
Before: Logo moves down as panel shrinks
After: Elements hide, layout stays intact

Code changes

The issue is that NotebookShell has styles that are based on the mobile flag of app, app.format which is set depending on the viewport width, with one shell this works because the shells width is automatically the viewports width, but when you open a sidepanel next to the shell you can shrink it by making the sidepanel bigger, the shells width is no longer the same the viewports width,
the collapsed mobile view of the header is nearly the same, just one the last checkpoint widget has display:none.
To fix I made the top panel element a container with container-type:inline-size and instead of depending on body[data-format = 'mobile'] it now depends on the next parents containers width which is the top panel
(top panel is the headers parent)
I considered adding functionality to completely hide the header when the width becomes so small the title pushes down the logo (usually > 250px) but I didn't know whether that is intended functionality.

Backwards-incompatible changes

none

Things I didnt feel comfortable changing

There is an another style that changes on the mobile flag body[data-format='mobile'] .jp-WindowedPanel-outer > *:first-child {
margin-top: 0;
}
the better fix would be giving the shell element a unique id and giving it the container-type:inline-size as it has multiple children that need readjustments when width < 760px, but I wasnt sure what to name it but with that the other styles could just go into the @container media slector
this fix only fixes the header

[github-actions]

👈 Launch a Binder on branch loldormy/notebook/main