Switch to hiding overflow on the Oops! text itself

overflow-x: hidden still hides vertical overflow See #155
WordPress · Sep 23, 2024 · 5cf3ac3 · 5cf3ac3
1 parent c639c02
commit 5cf3ac3
Showing 1 changed file with 11 additions and 14 deletions.
diff --git a/source/wp-content/themes/wporg-parent-2021/sass/page/_404.scss b/source/wp-content/themes/wporg-parent-2021/sass/page/_404.scss
@@ -4,15 +4,7 @@ body.error404 {
 	background-color: var(--wp--preset--color--charcoal-2);
 
 	.site-content-container {
-
-		/*
-		 * Prevent "oops" from creating a horizontal scroll.
-		 * In some iOS versions, these rules also have to be applied to <html>, but that would bleed over to other
-		 * pages. It's better to just let there be a scroll, since it's not a commonly used page.
-		 */
-		position: relative; // needed for overflow to work
-		overflow-x: hidden;
-
+		position: relative;
 		z-index: 0;
 
 		@include break-small() {
@@ -28,27 +20,32 @@ body.error404 {
 		}
 
 		.wporg-parent-oops-container {
-			position: relative;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100vw;
+			height: 100vh;
+			overflow: hidden;
 
 			> p {
 				display: none;
 			}
 
 			&::after {
 				content: "Oops!";
-				color: inherit;
 				display: block;
 				z-index: -1;
-				position: absolute;
+				position: relative;
+				width: 120vw;
 				top: 22px;
-				left: -10vw;
+				left: -4.9vw;
 				font-family: var(--wp--preset--font-family--eb-garamond);
 				font-size: var(--oops-font-size);
 				line-height: var(--oops-font-size);
 				opacity: 0.4; // Make the overlaid text more readable.
 
 				@include break-small() {
-					top: calc(var(--oops-font-size) * -0.55);
+					top: calc(var(--oops-font-size) * -0.25);
 				}
 			}
 		}