Changing display width per notebook

[VivaldoMendes]

Description

I use notebooks quite a lot and an important feature that I frequently need is to adapt the pane display width according to the contents of different notebooks. In Pluto.jl, I can easily do this by inserting a CSS code like, e.g., this one:

html"""
<style>
	@media screen {
		main {
			margin: 0 auto;
			max-width: 1600px;
    		padding-left: max(100px, 10%);
    		padding-right: max(380px, 10%); 
            # 383px to accommodate TableOfContents(aside=true)
		}
	}
</style>
"""

I tried several versions of CSS in marimo but all of them failed. Is it possible to do it? I do not want to change the width configuration of marimo on my computer; I need to do it on a notebook-by-notebook basis.

Thanks.

Suggested solution

Allow CSS to change the display width per notebook.

Are you willing to submit a PR?

• Yes

Alternatives

No response

Additional context

No response

[akshayka]

Hi @VivaldoMendes, you can choose between compact, medium and full-width on a per notebook basis. Are those options sufficient, or do you need further customizability?

[VivaldoMendes]

Hi @akshayka, the display width I need depends on the contents of particular notebooks. Obviously, I understand that by default, marimo cannot have a large set of alternatives regarding this issue. I knew that I could choose from those four options, but somehow, sometimes compact is too narrow and medium is too large. Is it possible to achieve the width I need with a customized CSS file? Is there an example I could use somewhere?

Congratulations on the remarkable software you have developed. It is amazing.