Observable screen width, not std width

Site Feedback
1

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

image
image3839×1913 387 KB

1 Like
2

Same-Origin Policy (SOP) restricts how a document or script loaded from one origin can interact with a resource from another origin. For example, when Site X tries to fetch content from Site Y in a frame, by default, Site Y’s pages are not accessible due to security reasons, it would be a huge security flaw if you could do it.

How to solve?

The window.postMessage() method provides a controlled mechanism to securely circumvent this restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');

The window.postMessage is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the source property of the dispatched event is always null as a security restriction. (The other properties have their expected values.)

1 Like