Rework horizontal spacing code to better support embedded notebooks

[fonsp]

After 4 years, I finally found the CSS code that I wanted 💛

• On very large screen, I want the notebook to be centered in the screen.
• On medium screens, I want the notebook on the left, with any free space on the right (for the Live Docs panel).
• On small screens, the notebook should take up all space.

Before, I implemented this with media queries, to detect each of the three situations. But this does not look good when the notebook is embedded on a site with a sidebar on the left, like https://plutojl.org/en/docs/abstractplutodingetjes/

Here, I would want the notebook to be pushed to the left, to make space for widgets (like to ToC on the right). But the media queries won't work, because the window width is not the editor width. And container queries are still not implemented.

Solution! I took a long train and found this solution:

pluto-editor main {
    align-self: flex-end;
    margin-right: max(
        /* First part: push away from the right */ min(/* taking up all free space */ (100% - (700px + 25px + 6px)), /* but don't do this more than */ 500px)
            /* Second part: center it */ max(0px, (100% - (700px + 25px + 6px)) / 2)
    );
}

Because it uses 100% in the calculations, it's relative to the editor (without container queries!). And all the min maxes make all the situations work.

Two videos of the new behaviour, one with a simulated sidebar on the left.

Schermopname.2024-04-22.om.20.08.56.mov

Schermopname.2024-04-22.om.20.09.16.mov

[github-actions]

Try this Pull Request!

Open Julia and type:

julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/fonsp/Pluto.jl", rev="editor-horizontal-spacing-rework")
julia> using Pluto