Just playing around with Pages and very much enjoying the wrap-in box (bugs notwithstanding), and realised that images that are placed inline outside of wrap boxes tend to ignore any automatic scaling/resizing to fit in the context of the page.

^ This is an example of an image (left) placed outside of a wrap-in box (right). This is on desktop, with a browser window fully expanded. The further I reduce the width of my browser window, the narrower the white space gap between image and box, until it ends up being pushed underneath the wrap-in box:

Images tend to scale automatically if the browser window is squeezed too narrow when there is no floating/wrap box present, so I was hoping if this could also be applied to images when a box is present? I can imagine some admins/writers will always want their images to be a specific size, so perhaps this could be a toggle/option on a per-image or AdminCP level?

Since the boxes are floated (and not aligned via flex or grid), I don’t believe this is possible.

Yeah, it sounds simple enough but it's a really hard thing to pull off without breaking the layout.

Ahh, fair enough. Thanks for the insight, guys.

Hi @Matt F and @Ehren , didn’t want to annoy you all with another topic so figured I’d keep to this one, as it’s sort of related… but upon dynamically resizing the browser window it seems that content can get a little too cramped when narrowed in:

Do you have any thoughts on how to adapt content in a browser window that’s this narrow? I was thinking about some custom CSS that would expand the pink box to full-width (like it does on mobile) but I don’t think I could do that with the usual “media” selector tag as that I’d only be able to target the browser window size and not the size of the main content container (which is what I would want to target). It’s kind of that weird space between Desktop and Tablet view, I suppose.

Or maybe I’m just over-thinking it and I should just chill out, LOL 😅

Well, Ehren is really the expert, but I'd look into a container query instead of a media query. E.g.

.ipsRichText {
	container-type: inline-size;
	container-name: i-rich-text-root;
}

@container i-rich-text-root (max-width:767px) {
	.ipsRichTextBox, .tiptap .ipsRichTextBox__nodeview-wrap > [data-node-view-wrapper] {
		width: 100%;
		display: block;
		margin-inline: 0;
	}
}

In theory, what that should do is force the box to behave as a full width box whenever the post content container is under 768 pixels wide (if you’re applying custom CSS, obviously you could do 980 or whatever breakpoint suits the situation).

A strict min-width in px might also work, but then you’d still be risking a narrow strip of content to the right of the box.

That’s a really elegant solution - didn’t know about the “container” selector, thanks @Matt F ! It’s appreciated! :)