🏠 back to Observable

Observable screen width, not std width

I was trying to work out a way to hack observable so it looked better on my 4k monitor.

I worked out that the css variable --max-width-8: 64rem was what was controlling the width. But changing that didn’t work because of the iFrame (i think).

Then I noticed the CSS .wm8 was used in #app > div > main > div.flex.w-100.mw8.center but because that’s the outside the iFrame document.querySelector("#app > div > main > div.flex.w-100.mw8.center")
RuntimeError: Blocked a frame with origin “…” from accessing a cross-origin frame.

So for now I have a tampermonkey script to make my life easier.
But what would be good is it observable looked at the browser width and used .mw9 if the screen is 4k and it could even work with smaller browser sizes as it goes down to .mw1

–max-width-1: 1rem;
–max-width-2: 2rem;
–max-width-3: 4rem;
–max-width-4: 8rem;
–max-width-5: 16rem;
–max-width-6: 32rem;
–max-width-7: 48rem;
–max-width-8: 64rem;
–max-width-9: 96rem;

Below is a pic using .mw9

1 Like