Fix wrongly wrapping code blocks, breaking line numbers (#7507)

t3chguy · web-flow · commit f8871969fdb2 · 2022-01-11T10:50:29.000Z
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -483,8 +483,17 @@ $left-gutter: 64px;
         background-color: $codeblock-background-color;
     }
 
-    pre code > * {
-        display: inline;
+    // this selector wrongly applies to code blocks too but we will unset it in the next one
+    code {
+        white-space: pre-wrap; // don't collapse spaces in inline code blocks
+    }
+
+    pre code {
+        white-space: pre; // we want code blocks to be scrollable and not wrap
+
+        > * {
+            display: inline;
+        }
     }
 
     pre {
@@ -498,10 +507,6 @@ $left-gutter: 64px;
             background: transparent;
         }
     }
-
-    code {
-        white-space: pre-wrap; // don't collapse spaces in inline code blocks
-    }
 }
 
 .mx_EventTile_lineNumbers {

Original file line number	Diff line number	Diff line change
`@@ -483,8 +483,17 @@ $left-gutter: 64px;`
`483`	`483`	`background-color: $codeblock-background-color;`
`484`	`484`	`}`
`485`	`485`
`486`		`- pre code > * {`
`487`		`- display: inline;`
	`486`	`+ // this selector wrongly applies to code blocks too but we will unset it in the next one`
	`487`	`+ code {`
	`488`	`+ white-space: pre-wrap; // don't collapse spaces in inline code blocks`
	`489`	`+ }`
	`490`	`+`
	`491`	`+ pre code {`
	`492`	`+ white-space: pre; // we want code blocks to be scrollable and not wrap`
	`493`	`+`
	`494`	`+ > * {`
	`495`	`+ display: inline;`
	`496`	`+ }`
`488`	`497`	`}`
`489`	`498`
`490`	`499`	`pre {`
`@@ -498,10 +507,6 @@ $left-gutter: 64px;`
`498`	`507`	`background: transparent;`
`499`	`508`	`}`
`500`	`509`	`}`
`501`		`-`
`502`		`- code {`
`503`		`- white-space: pre-wrap; // don't collapse spaces in inline code blocks`
`504`		`- }`
`505`	`510`	`}`
`506`	`511`
`507`	`512`	`.mx_EventTile_lineNumbers {`