Hide site hub when resizing frame upwards to avoid overlap (#52180)

WordPress · Jul 13, 2023 · ae826fd · ae826fd
1 parent 10ea6ae
commit ae826fd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/edit-site/src/components/resizable-frame/style.scss b/packages/edit-site/src/components/resizable-frame/style.scss
@@ -1,6 +1,23 @@
 .edit-site-resizable-frame__inner {
 	position: relative;
 
+	&.edit-site-layout__resizable-frame-oversized {
+		@at-root {
+			body:has(&) {
+				.edit-site-site-hub {
+					.edit-site-site-hub__site-title,
+					.edit-site-site-hub_toggle-command-center {
+						opacity: 0 !important;
+					}
+
+					.edit-site-site-hub__view-mode-toggle-container {
+						background-color: transparent;
+					}
+				}
+			}
+		}
+	}
+
 	&.is-resizing {
 		@at-root {
 			body:has(&) {

diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
@@ -8,6 +8,11 @@
 		gap: 0;
 	}
 
+	.edit-site-site-hub__site-title,
+	.edit-site-site-hub_toggle-command-center {
+		transition: opacity ease 0.1s;
+	}
+
 	.edit-site-site-hub__site-view-link {
 		flex-grow: 0;
 		@include break-mobile() {