[MM-60215] Webapp resize with announcement banner enabled will cause screen to blank out (#28065)

webapp/channels/src/sass/base/_structure.scss

@@ -18,7 +18,7 @@ body {
     }
 
     &.admin-onboarding {
-        background-image: url('images/admin-onboarding-background.jpg');
+        background-image: url("images/admin-onboarding-background.jpg");
         background-repeat: no-repeat;
         background-size: cover;
     }
@@ -115,7 +115,10 @@ body.app__body #root {
 
     --columns: min-content minmax(385px, 1fr) min-content;
     grid-template:
-        "announcement announcement announcement"min-content "admin-announcement admin-announcement admin-announcement"min-content "header header header"min-content "team-sidebar main app-sidebar"
+        "announcement announcement announcement" min-content
+        "admin-announcement admin-announcement admin-announcement" min-content
+        "header header header" min-content
+        "team-sidebar main app-sidebar"
         "footer footer footer" min-content / var(--columns);
 
     > :only-child {
@@ -128,10 +131,12 @@ body.app__body #root {
         padding-bottom: 0;
         padding-right: 0;
         grid-template:
-            'announcement announcement'min-content 'admin-announcement admin-announcement'min-content 'header header'min-content 'lhs center'
+            "announcement announcement" min-content
-            'footer footer'min-content;
+            "admin-announcement admin-announcement" min-content
-        grid-template-columns: auto 1fr;
+            "header header" min-content
-        /* lhs takes its content width, center takes remaining space */
+            "lhs center"
+            "footer footer" min-content;
+        grid-template-columns: auto 1fr; /* lhs takes its content width, center takes remaining space */
     }
 
     &.container-fluid {
@@ -164,9 +169,7 @@ body.app__body #root {
         margin: 0 4px 4px 4px;
         border-radius: var(--radius-l);
         grid-area: main;
-        grid-template:
+        grid-template: "lhs center rhs";
-            'lhs center rhs'
-        ;
         grid-template-columns: min-content minmax(385px, 1fr) min-content;
 
         &:has(.backstage-body) {
@@ -175,8 +178,8 @@ body.app__body #root {
             margin: 0;
             border-radius: 0;
             grid-template:
-                'header'min-content 'main'
+                "header" min-content
-            ;
+                "main";
         }
 
         &:has(#playbooks-backstageRoot) {
@@ -234,8 +237,11 @@ body.app__body #root {
             padding-right: 0;
             z-index: 17;
             grid-template:
-                'announcement'min-content 'header'min-content 'main'auto 'footer'min-content / auto;
+                "announcement" min-content
-
+                "admin-announcement" min-content
+                "header" min-content
+                "main" auto
+                "footer" min-content / auto;
             .team-sidebar,
             .app-bar {
                 grid-area: main;
@@ -247,9 +253,7 @@ body.app__body #root {
 
             .main-wrapper {
                 margin: 0;
-                grid-template:
+                grid-template: "main";
-                    'main'
-                ;
                 padding: 0;
                 border-radius: 0;
 
@@ -280,7 +284,7 @@ body.app__body #root {
                 position: absolute;
                 width: 100%;
                 grid-area: center;
-                transition: width .25s ease-in-out;
+                transition: width 0.25s ease-in-out;
                 border-radius: var(--radius-l);
             }