Floated images with alignleft or alignright in the toolbar go outside of contentSize area

[itsamoreh]

When images or other supported blocks are floated using Align Left or Align Right, they go outside of the contentSize area.

The following css fixes the issue while also setting float to none and centring images on small screens where images should probably not be floated.

/* assets/css/alignments.css */
body {
	.is-layout-constrained {
		> .alignleft {
			margin: var(--wp--custom--spacing--gap);
			margin-left: 0;
			padding-left: 0;
		}

		> .alignright {
			margin: var(--wp--custom--spacing--gap);
			margin-right: 0;
			padding-right: 0;
		}

		/*
			Center floated images on small screens.
		*/
		@media (max-width: 480px) {
			> .alignleft {
				float: none;
				margin: var(--wp--custom--spacing--gap) auto;
			}

			> .alignright {
				float: none;
				margin: var(--wp--custom--spacing--gap) auto;
			}
		}

		/*
			Prevent floated images from going outside of the contentSize area.
			calc( var(--wp--style--global--content-size) + var(--wp--custom--spacing--gap) * 2 )
		*/
		@media (min-width: calc(1000px + 24px * 2)) {
			> .alignleft {
				margin-left: calc((100% - var(--wp--style--global--content-size)) / 2);
			}

			> .alignright {
				margin-right: calc((100% - var(--wp--style--global--content-size)) / 2);
			}
		}
	}
}

[itsamoreh]

See itsamoreh/andreemakes.com@4ee2f17