AI-679: Fix more sidebar layout issues (#107529)

* AI-679: Fix more sidebar layout issues

* Add comment

* Fix: Notice panel layout & Improve WP admin siderbar open styles

* Fix: Site editor and page editor sidebar layouts

* Remove unnecessary mixin

* Update CIAB editor CSS selector

* Fix: Site editor nav page layout

---------

Co-authored-by: Welly Shen <[email protected]>

Author: wellyshen

packages/agents-manager/src/hooks/use-agent-layout-manager/style.scss

@@ -1,6 +1,6 @@
 @import '@wordpress/base-styles/colors';
 
-$admin-bar-height: 32px;
+$admin-bar-height: 33px;
 $layout-spacing: 16px;
 $sidebar-width: 350px;
 $chat-header-height: 38px;
@@ -50,6 +50,17 @@ $transition-timing: $transition-duration cubic-bezier( 0.4, 0, 0.2, 1 );
 	}
 }
 
+// Reposition the notice panel
+@mixin notice-panel-open( $notice-panel-selector ) {
+	#{$notice-panel-selector} {
+		right: $sidebar-width !important;
+		top: $layout-spacing + $admin-bar-height !important;
+		bottom: $layout-spacing !important;
+		border-bottom-right-radius: $main-border-radius !important;
+		overflow: hidden;
+	}
+}
+
 // Reposition the editor's template save confirmation panel
 @mixin editor-save-panel-open( $save-panel-selector ) {
 	#{$save-panel-selector} {
@@ -66,19 +77,32 @@ $transition-timing: $transition-duration cubic-bezier( 0.4, 0, 0.2, 1 );
 	}
 }
 
-// TODO: AI-679 will fix it...
 /* WP Admin */
 $admin-menu-width-unified: 272px;
 $admin-menu-width-classic: 160px;
 $admin-menu-width-folded: 37px;
 $admin-content-top: calc( $admin-bar-height + $layout-spacing );
-$admin-content-height: calc( 100vh - $admin-bar-height - ( $layout-spacing * 2 ) );
-$border-color: #545454;
 $admin-background-color: #f1f1f1;
+$border-color: #545454;
 
 // Mixin for wp-admin sidebar open styles
-// Used by both body-level and #wpwrap-level containers
-@mixin wp-admin-sidebar-open-general() {
+@mixin wp-admin-sidebar-open-specific( $admin-menu-width ) {
+	#wpcontent {
+		margin-left: calc( $admin-menu-width + $layout-spacing ) !important;
+	}
+
+	#wpbody {
+		left: calc( $admin-menu-width + $layout-spacing );
+		width: calc( 100% - $admin-menu-width - $layout-spacing - $sidebar-width ) !important;
+	}
+}
+
+body.wp-admin.agents-manager-sidebar-container--sidebar-open {
+	@include wp-admin-sidebar-open-specific( $admin-menu-width-classic );
+	@include notice-panel-open( '#wpnt-notes-panel2' );
+
+	background-color: $gray-900;
+
 	#wpadminbar {
 		position: fixed !important;
 		top: $layout-spacing;
@@ -88,18 +112,18 @@ $admin-background-color: #f1f1f1;
 		border-radius: $main-border-radius $main-border-radius 0 0;
 		border: 1px solid $border-color;
 		border-bottom: none;
+		overflow: hidden;
 	}
 
 	#adminmenuback,
 	#adminmenuwrap {
 		position: fixed !important;
 		top: $admin-content-top;
 		left: $layout-spacing;
-		bottom: $layout-spacing;
-		height: $admin-content-height !important;
+		height: calc( 100vh - $admin-bar-height - ( $layout-spacing * 2 ) ) !important;
 		border-left: 1px solid $border-color;
 		border-bottom: 1px solid $border-color;
-		border-radius: 0 0 0 $main-border-radius;
+		border-bottom-left-radius: $main-border-radius;
 		overflow: scroll;
 	}
 
@@ -111,27 +135,23 @@ $admin-background-color: #f1f1f1;
 		position: fixed !important;
 		top: $admin-content-top;
 		right: $sidebar-width;
-		bottom: $layout-spacing;
-		height: $admin-content-height !important;
-		max-height: $admin-content-height !important;
-		min-height: 0;
-		box-sizing: border-box;
 		padding-left: $layout-spacing;
-		border-radius: 0 0 $main-border-radius 0;
-		border: 1px solid $border-color;
-		border-top: none;
+		bottom: $layout-spacing - 1px;
+		border-bottom-right-radius: $main-border-radius;
+		border-right: 1px solid $border-color;
+		border-bottom: 1px solid $border-color;
 		overflow-y: auto;
 		overflow-x: hidden;
 		background-color: $admin-background-color;
-		margin: 0 !important;
+		box-sizing: border-box;
 	}
 
 	#wpfooter {
 		margin-right: calc( $sidebar-width + 1px ) !important;
-		bottom: 17px;
-		left: 18px;
+		left: $layout-spacing - 2px;
+		bottom: $layout-spacing;
+		border-bottom-right-radius: $main-border-radius;
 		background-color: $admin-background-color;
-		border-radius: 0 0 $main-border-radius 0;
 	}
 
 	.agents-manager-chat--docked {
@@ -144,61 +164,18 @@ $admin-background-color: #f1f1f1;
 	.agents-manager-sidebar-fab {
 		display: none;
 	}
-}
 
-@mixin wp-admin-sidebar-open-specific( $admin-menu-width ) {
-	#wpcontent {
-		margin-left: calc( $admin-menu-width + $layout-spacing ) !important;
+	&.is-nav-unification {
+		@include wp-admin-sidebar-open-specific( $admin-menu-width-unified );
 	}
 
-	#wpbody {
-		left: calc( $admin-menu-width + $layout-spacing );
-		width: calc( 100% - $admin-menu-width - $layout-spacing - $sidebar-width ) !important;
+	&.folded {
+		@include wp-admin-sidebar-open-specific( $admin-menu-width-folded );
 	}
 }
 
-// When container is body (legacy behavior)
-body.wp-admin:has( #wpwrap.agents-manager-sidebar-container--sidebar-open ),
-body.is-nav-unification.wp-admin.agents-manager-sidebar-container--sidebar-open,
-body.folded.wp-admin.agents-manager-sidebar-container--sidebar-open,
-body.wp-admin.agents-manager-sidebar-container--sidebar-open {
-	background-color: $gray-900;
-	@include wp-admin-sidebar-open-general();
-}
-
-body.is-nav-unification.wp-admin.agents-manager-sidebar-container--sidebar-open {
-	@include wp-admin-sidebar-open-specific( $admin-menu-width-unified );
-}
-
-body.folded.wp-admin.agents-manager-sidebar-container--sidebar-open {
-	@include wp-admin-sidebar-open-specific( $admin-menu-width-folded );
-}
-
-body.wp-admin.agents-manager-sidebar-container--sidebar-open {
-	@include wp-admin-sidebar-open-specific( $admin-menu-width-classic );
-}
-
-body.is-nav-unification #wpwrap.agents-manager-sidebar-container--sidebar-open {
-	@include wp-admin-sidebar-open-specific( $admin-menu-width-unified );
-}
-
-body #wpwrap.agents-manager-sidebar-container--sidebar-open {
-	@include wp-admin-sidebar-open-general();
-	@include wp-admin-sidebar-open-specific( $admin-menu-width-classic );
-}
-
-body.folded #wpwrap.agents-manager-sidebar-container--sidebar-open {
-	@include wp-admin-sidebar-open-general();
-	@include wp-admin-sidebar-open-specific( $admin-menu-width-folded );
-}
-
-#wp-admin-bar-top-secondary {
-	border-radius: $main-border-radius $main-border-radius 0 0 !important;
-}
-
-// TODO: This solution will impact other pages, we need to find a better way in AI-679...
 /* Calypso */
-body:not( .wp-admin ).agents-manager-sidebar-container {
+body:is( [class*='is-group-'], [class*='is-section-'] ).agents-manager-sidebar-container {
 	@include sidebar-base( '#wpcom #content' );
 
 	#content {
@@ -207,15 +184,15 @@ body:not( .wp-admin ).agents-manager-sidebar-container {
 
 	&.agents-manager-sidebar-container--sidebar-open {
 		@include sidebar-open-base( '#wpcom #content' );
+		@include notice-panel-open( '#wpnc-panel' );
 
 		#header {
 			top: $layout-spacing;
 			left: $layout-spacing;
 			right: $sidebar-width;
 			width: auto;
 			overflow: hidden;
-			border-top-left-radius: $main-border-radius;
-			border-top-right-radius: $main-border-radius;
+			border-radius: $main-border-radius $main-border-radius 0 0;
 		}
 
 		#content {
@@ -231,15 +208,13 @@ body:not( .wp-admin ).agents-manager-sidebar-container {
 			left: $layout-spacing;
 			bottom: $layout-spacing;
 			overflow: hidden;
-			border-top-left-radius: $main-border-radius;
-			border-bottom-left-radius: $main-border-radius;
+			border-radius: $main-border-radius 0 0 $main-border-radius;
 		}
 	}
 }
 
-// TODO: AI-679 will fix it...
 /* Next Admin editor */
-.next-admin.agents-manager-sidebar-container {
+body.next-admin.agents-manager-sidebar-container {
 	@include sidebar-base( '.next-admin-layout__canvas.is-full-canvas' );
 
 	&.agents-manager-sidebar-container--sidebar-open {
@@ -250,9 +225,8 @@ body:not( .wp-admin ).agents-manager-sidebar-container {
 	}
 }
 
-// TODO: AI-679 will fix it...
 /* Site editor */
-#site-editor .agents-manager-sidebar-container {
+body.site-editor-php.agents-manager-sidebar-container {
 	@include sidebar-base( '.edit-site-layout__canvas' );
 
 	// Delay to prevent flickering when closing the left navigation sidebar
@@ -265,12 +239,17 @@ body:not( .wp-admin ).agents-manager-sidebar-container {
 		@include editor-save-panel-open(
 			'.interface-navigable-region.interface-interface-skeleton__actions'
 		);
+
+		// Override canvas styles when the site editor navigation menu is open
+		.edit-site-layout:not( .is-full-canvas ) .edit-site-layout__canvas {
+			width: calc( 100% - $sidebar-width ) !important;
+			margin: 0 !important;
+		}
 	}
 }
 
-// TODO: AI-679 will fix it...
 /* Page editor */
-.block-editor .agents-manager-sidebar-container {
+body.post-php.agents-manager-sidebar-container {
 	@include sidebar-base( '.edit-post-layout' );
 
 	.edit-post-layout {