Class or attribute for a pane's "safe" width and height?

[JJSlote]

Greetings @pjeby

New to Pane Relief, with a specific objective. I'm trying to make a responsive style for an iframe, one that enables the iframe to fit efficiently in a pane of any size. But I'm finding a CSS statement like width: 70vw ; calculates against the size of the Obsidian window rather than the pane. The same applies to @media queries. I've also tried unsuccessfully to find a usable pane width in the Inspector.

Perhaps you know of a way to size an iframe based on existing attributes? If not, I think it would be a great enhancement for Pane Relief to add SafeWidth and SafeHeight classes or attributes to div.workspace-leaf. Ideally these would not describe the pane's precise height and width; they'd be too cumbersome to test for in CSS. Instead, the attribute would describe a width and height a bit smaller, to the nearest 50px perhaps, or to some configurable tolerance. Then the user could create a descendant combinator, something like: div.workspace-leaf[pane-relief-safewidth="850px"] iframe {...}
to size the frame responsively to its container.

Thanks for considering!! Jerome

[pjeby]

I take it you can't use calc(100% - something)? I'm afraid I don't know how I'd go about figuring out such a thing, or how to keep it updated when things are resized.

[JJSlote]

PJ, you've actually delivered the solution. Turns out that while width: 50vw sizes against the window, width: 50% sizes against the pane. I missed this in testing because I was using transform: scale() in the iframe, causing it to display quite a bit larger than the percent value specified. Corrected for scale, the iframe predictably fits the container. Just what I was looking for.

Much thanks! -- Jerome

[tot0]

@JJSlote How did you implement the changes in your Obsidian setup?