fix(blocks): keep GoDAM media blocks robust in flex & narrow containers

assets/src/blocks/godam-audio/style.scss

@@ -11,3 +11,13 @@
 .wp-block-godam-audio {
 	box-sizing: border-box;
 }
+
+// Fill the inline space of a flex container. Inside a core Group using a
+// Row/Stack (flex) layout the block root is a flex item with the default
+// `flex: 0 1 auto`, so it collapses to its min-content width (the player
+// controls) instead of filling. Scoped to flex parents because flow,
+// constrained and grid parents already stretch the block, and a root
+// `width: 100%` there would break Align: Full width and side margins.
+:where(.is-layout-flex) > .wp-block-godam-audio {
+	width: 100%;
+}

assets/src/blocks/godam-pdf/editor.scss

@@ -5,6 +5,28 @@
 // that appears after a higher-specificity one for the same element, so the two groups have
 // to be in this order. Nothing matches both groups, so the ordering has no cascade effect.
 
+// The card stacked: cover on top at full width, text below. Used by the card's
+// container query and by the phone fallback for floated cards, as in style.scss.
+@mixin godam-pdf-card-stacked {
+	flex-direction: column;
+	align-items: flex-start;
+
+	&__cover {
+		width: 100%;
+		height: 250px;
+		flex: none;
+		border-radius: 10px 10px 0 0;
+	}
+
+	&__info {
+		padding: 0 16px 16px 16px;
+	}
+
+	&__title {
+		white-space: normal;
+	}
+}
+
 // ── Inspector helpers ────────────────────────────────────────────────────────
 .godam-pdf-panel-description {
 	font-size: 12px;
@@ -242,6 +264,16 @@
 		width: 100%;
 	}
 
+	// Query container so the card stacks based on the width the block is given
+	// by its parent (column, grid cell, flex item) rather than the viewport,
+	// mirroring the front end so the editor preview matches the rendered output.
+	// Floated (Align left/right) blocks are skipped, as on the front end, so
+	// inline-size containment doesn't collapse the shrink-to-fit float to zero.
+	&:not(.alignleft, .alignright) .godam-pdf-preview--card {
+		container-type: inline-size;
+		container-name: godam-pdf-card;
+	}
+
 	.godam-pdf-card {
 		display: flex;
 		align-items: center;
@@ -262,10 +294,6 @@
 				object-fit: cover;
 				display: block;
 			}
-
-			@media ( max-width: 480px ) {
-				border-radius: 10px 10px 0 0;
-			}
 		}
 
 		&__cover-placeholder {
@@ -287,10 +315,6 @@
 		&__info {
 			flex: 1;
 			min-width: 0;
-
-			@media ( max-width: 480px ) {
-				padding: 0 16px 16px 16px;
-			}
 		}
 
 		&__title {
@@ -301,10 +325,6 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 			color: #1e1e1e;
-
-			@media ( max-width: 480px ) {
-				white-space: normal;
-			}
 		}
 
 		&__description {
@@ -322,6 +342,24 @@
 			color: #9ca3af;
 			margin: 0;
 		}
+
+		// Stack vertically when the card's own container is narrow, regardless of
+		// the viewport width (e.g. the card placed in a narrow column on desktop).
+		@container godam-pdf-card ( max-width: 400px ) {
+
+			@include godam-pdf-card-stacked;
+		}
+	}
+
+	// A floated card (Align left/right) has no query container (see above), so it
+	// falls back to the viewport, as on the front end: stacked on phones.
+	@media ( max-width: 480px ) {
+
+		&.alignleft .godam-pdf-card,
+		&.alignright .godam-pdf-card {
+
+			@include godam-pdf-card-stacked;
+		}
 	}
 
 	&.is-transient {

assets/src/blocks/godam-pdf/style.scss

@@ -16,6 +16,30 @@
 @import "../../../../node_modules/react-pdf/dist/esm/Page/AnnotationLayer";
 @import "./viewer/viewer";
 
+// The card stacked: cover on top at full width, text below. Used by the card's
+// container query and by the phone fallback for floated cards.
+@mixin godam-pdf-card-stacked {
+	flex-direction: column;
+	align-items: flex-start;
+
+	&__cover {
+		width: 100%;
+		height: 250px;
+		flex: none;
+		border-radius: 10px 10px 0 0;
+	}
+
+	&__info {
+		padding: 0 16px 16px 16px;
+	}
+
+	// Show the full title once stacked — there is room for it, and the
+	// side-by-side ellipsis was what truncated it in narrow placements.
+	&__title {
+		white-space: normal;
+	}
+}
+
 .wp-block-godam-pdf {
 	box-sizing: border-box;
 
@@ -101,6 +125,17 @@
 		width: 100%;
 	}
 
+	// Make the wrapper a size-query container so the card below adapts to the
+	// width its parent actually gives it (a column, grid cell or flex item),
+	// not the viewport width. This lets a narrow placement stack even on a
+	// wide screen. Floated (Align left/right) blocks are skipped: a float is
+	// sized by its content, and inline-size containment reports that content
+	// as zero wide, which would collapse the card.
+	&:not(.alignleft, .alignright) .godam-pdf-card-wrapper {
+		container-type: inline-size;
+		container-name: godam-pdf-card;
+	}
+
 	.godam-pdf-card {
 		display: flex;
 		align-items: center;
@@ -179,25 +214,37 @@
 			margin: 0;
 		}
 
-		// Stack vertically on small screens.
-		@media ( max-width: 480px ) {
-			flex-direction: column;
-			align-items: flex-start;
+		// Stack vertically when the card's own container is narrow, regardless of
+		// the viewport width (e.g. the card placed in a narrow column on desktop).
+		@container godam-pdf-card ( max-width: 400px ) {
 
-			&__cover {
-				width: 100%;
-				height: 250px;
-				flex: none;
-				border-radius: 10px 10px 0 0;
-			}
+			@include godam-pdf-card-stacked;
+		}
+	}
 
-			&__info {
-				padding: 0 16px 16px 16px;
-			}
+	// A floated card (Align left/right) has no query container (see above), so it
+	// falls back to the viewport, as before container queries: stacked on phones.
+	@media ( max-width: 480px ) {
+
+		&.alignleft .godam-pdf-card,
+		&.alignright .godam-pdf-card {
+
+			@include godam-pdf-card-stacked;
 		}
 	}
 }
 
+// Fill the inline space of a flex container. Inside a core Group using a
+// Row/Stack (flex) layout the block root is a flex item with the default
+// `flex: 0 1 auto`, so it collapses to its min-content width while
+// `.godam-pdf-wrapper`'s fixed pixel height stays — rendering a tall, narrow,
+// empty box. Scoped to flex parents because flow, constrained and grid parents
+// already stretch the block, and a root `width: 100%` there would break
+// Align: Full width (negative-margin bleed) and side margins.
+:where(.is-layout-flex) > .wp-block-godam-pdf {
+	width: 100%;
+}
+
 // ── Unsupported-format notice ───────────────────────────────────────────────
 // Shown only inside WPBakery's front-end editor (see GoDAM_Document::render()).
 // The published page renders nothing at all for a non-PDF, so visitors never

assets/src/blocks/godam-video-thumbnail/style.scss

@@ -44,3 +44,12 @@
 		transform: translate(-50%, -50%) scale(1.1);
 	}
 }
+
+// Fill the inline space of a flex container so the thumbnail doesn't collapse to
+// its min-content width when placed as a flex item inside a core Group using a
+// Row/Stack layout (its intended home is a grid/query-loop cell that gives it
+// width). Scoped to flex parents because a root `width: 100%` elsewhere would
+// break Align: Full width.
+:where(.is-layout-flex) > .wp-block-godam-video-thumbnail {
+	width: 100%;
+}