Merge "Fix styling for code blocks with copy buttons next to floated content"

modules/pygments.copy.less

@@ -5,10 +5,6 @@
  * Original author: Krinkle
  */
 
-.mw-highlight-copy {
-	position: relative;
-}
-
 /**
  * https://doc.wikimedia.org/oojs-ui/master/demos/ (2023-11-13)
  * https://design.wikimedia.org/style-guide/components/buttons.html

modules/pygments.wrapper.less

@@ -3,22 +3,24 @@
 .mw-highlight {
 	unicode-bidi: embed;
 
+	div& {
+		// Position absolutely positioned elements relative to this container.
+		position: relative;
+		// Create a block formatting context so that the code block's background and
+		// absolutely positioned elements inside it (line numbers, copy button)
+		// do not overlap floated elements outside of it (e.g. image thumbnails, infoboxes).
+		// See T126010, T272853, T40932#10211022.
+		display: flow-root;
+		// Move the margin from the nested pre, as the block formatting context prevents margin collapsing
+		margin: 1em 0;
+	}
+
 	pre {
+		margin: 0;
 		/* Use a more commonly found tab size of 4 (e.g. as used in CodeEditor)
 		instead of the browser-default value of 8 */
 		-moz-tab-size: 4;
 		tab-size: 4;
-		// Position .linenos relative to this container.
-		// Do not put this on the main container as it is 100%
-		// and causes it to stack above floated elements (T272853)
-		position: relative;
-	}
-
-	/* The nested pre already has a background. T126010 */
-	.mw-highlight& { /* Increase specificity to override the Pygments generated style in dark mode */
-		div& {
-			background-color: inherit;
-		}
 	}
 
 	/* Avoid displaying double borders for nested 'code' elements.