Fix scrolling in code blocks

site/css/main.scss

@@ -114,17 +114,11 @@ article {
 			font-family: $monospace;
 			color: var(--secondary-ui-text-color);
 		}
-		pre {
-			&::before, &::after {
-				content: "```";
-				display: block;
-				background: none;
-				color: var(--secondary-ui-text-color);
-			}
-			code::before, code::after {
-				content: "";
-				display: none;
-			}
+		pre code::before,
+		pre code::after {
+			// we don't show the decorations for pre blocks, because it can interfere with scrolling horizontally
+			content: "";
+			display: none;
 		}
 		strong::before, strong::after {
 			content: "**";
@@ -285,8 +279,8 @@ a {
 }
 
 pre {
-	overflow: scroll;
-	
+	overflow-x: scroll;
+
 	-moz-tab-size: 4;
 	-o-tab-size: 4;
 	tab-size: 4;

site/css/syntax-highlighting.css

@@ -8,11 +8,10 @@ Modified to use colors from CSS vars, defined in theme.scss
 	overflow-x: auto;
 	padding: 0.5em;
 	color: var(--atom-mono-1);
-	
+	background: var(--atom-base);
 }
 
 .hljs > code {
-	background: var(--atom-base);
 	display: block;
 }
 
@@ -83,4 +82,4 @@ Modified to use colors from CSS vars, defined in theme.scss
 
 .hljs-link {
 	text-decoration: underline;
-}
+}