From 80201b49d67e2f0cbd4a59462658e8c7a573fa7e Mon Sep 17 00:00:00 2001
From: Brandon Payton <brandon@happycode.net>
Date: Tue, 19 Mar 2024 18:22:59 -0400
Subject: [PATCH] Fix experimental notice in FF ESR (#1117)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #1106 where the experimental notice takes over most of the content
area.

<img alt="Screenshot 2024-03-14 at 11 06 52 AM" width="1728"
src="https://private-user-images.githubusercontent.com/515050/312893019-757cc95c-b84b-421e-b34c-b9429b23f896.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTA4Nzg5NDIsIm5iZiI6MTcxMDg3ODY0MiwicGF0aCI6Ii81MTUwNTAvMzEyODkzMDE5LTc1N2NjOTVjLWI4NGItNDIxZS1iMzRjLWI5NDI5YjIzZjg5Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMzE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDMxOVQyMDA0MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNTVlZTY2MGE5MGRhNmY1YjNiODJmNWJiOWVjNjA5OTk3ZDVkMjM0YjUzODA1NDAzYTRjOTFiMWFlYmZmODBiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ad2mS5a6hdiT6e7lc3TW1gXPbiw5faGZaCtXta0qDQU">

## What problem is it solving?

The experiemental-and-fun notice is styled with nested CSS which is not
supported by Firefox ESR v115.x. Firefox v117.x introduced CSS nesting
support.

## How is the problem addressed?

This PR removes use of nested CSS for now.

## Testing Instructions

- Install and launch Firefox ESR v115.x
- Run `npm run dev`
- Navigate to http://localhost:5400/website-server/ and observe the
large notice
- If the notice is missing, clear cookies for the current site and
reload the page.
- Apply this patch
- Clear cookies for the current site, reload the page, and observe the
notice is displayed reasonably at the bottom of the screen.

<img width="456" alt="image"
src="https://github.com/WordPress/wordpress-playground/assets/530877/2ccd26c6-50f8-4822-b84f-e1b2864bb3ef">
NOTE: Playground is failing to load in FF ESR from localhost, but it is
likely unrelated. This is just a CSS change, and the problem occurs on
both trunk and this branch.
---
 .../browser-chrome/style.module.css           | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/playground/website/src/components/browser-chrome/style.module.css b/packages/playground/website/src/components/browser-chrome/style.module.css
index a7b6a2c2a5..1c52cbada3 100644
--- a/packages/playground/website/src/components/browser-chrome/style.module.css
+++ b/packages/playground/website/src/components/browser-chrome/style.module.css
@@ -18,17 +18,17 @@
 	align-items: center;
 	color: #1e1e1e;
 	cursor: pointer;
+}
 
-	svg {
-		margin-right: 10px;
-		width: 20px;
-		min-width: 20px;
-		fill: #e14640;
-	}
+.experimental-notice svg {
+	margin-right: 10px;
+	width: 20px;
+	min-width: 20px;
+	fill: #e14640;
+}
 
-	&.is-hidden {
-		display: none;
-	}
+.experimental-notice.is-hidden {
+	display: none;
 }
 
 body.is-embedded .fake-window-wrapper {
@@ -42,22 +42,23 @@ body.is-embedded .fake-window-wrapper {
 
 .wrapper.has-small-window {
 	padding: 15px 60px 55px 60px;
+}
 
-	.window {
-		max-width: 1200px;
-		height: 100%;
-		border-radius: 6px;
-	}
+.wrapper.has-small-window .window {
+	max-width: 1200px;
+	height: 100%;
+	border-radius: 6px;
 }
 
 .wrapper.has-full-size-window {
 	padding: 0;
-	.window {
-		max-width: 100vw;
-		width: 100%;
-		height: 100%;
-		border-radius: 0;
-	}
+}
+
+.wrapper.has-full-size-window .window {
+	max-width: 100vw;
+	width: 100%;
+	height: 100%;
+	border-radius: 0;
 }
 
 .window {