MM-58215 - Fixing error page (#27002)

* MM-58215 - Fixing error page

* Fixing prority

* updating specificity

* fixing announcement in default cases

* updating announcement bar

* updating css

* updating grid

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

@@ -87,6 +87,11 @@ body {
 }
 
 /* stylelint-disable -- grid-template indentation */
+
+body.app__body {
+    background-color: var(--sidebar-header-bg);
+}
+
 body.admin-onboarding #root {
     &.channel-view {
         display: flex;
@@ -94,19 +99,8 @@ body.admin-onboarding #root {
     }
 }
 
-#root,
-body.app__body #root {
-    display: grid;
-    overflow: hidden;
-
-    grid-template:
-        'header' min-content
-        'main'
-        'footer' min-content
-    ;
-
-    &.channel-view {
-        background-color: var(--sidebar-header-bg);
+.app__body.channel-view {
+    #root {
         --columns: min-content minmax(385px, 1fr) min-content;
         grid-template:
             'announcement announcement announcement' min-content
@@ -119,6 +113,19 @@ body.app__body #root {
             background-color: $bg--gray;
         }
     }
+}
+
+#root,
+body.app__body #root {
+    display: grid;
+    overflow: hidden;
+
+    grid-template:
+        "announcement" min-content
+        "header" min-content
+        "main"
+        "footer" min-content
+    ;
 
     &.console__root {
         background-color: inherit;
@@ -130,7 +137,7 @@ body.app__body #root {
             'lhs center'
             'footer footer' min-content
         ;
-        grid-template-columns: min-content auto;
+        grid-template-columns: auto 1fr; /* lhs takes its content width, center takes remaining space */
     }
 
     &.container-fluid {

webapp/channels/src/sass/components/_announcement-bar.scss

@@ -4,7 +4,7 @@
     z-index: 999;
     display: flex;
     overflow: hidden;
-    width: 100%;
+    width: 100vw;
     min-height: $announcement-bar-height;
     max-height: $announcement-bar-height;
     align-items: center;
@@ -19,6 +19,7 @@
         width: 100%;
         align-items: center;
         justify-content: center;
+        padding: 0 32px;
         white-space: nowrap;
 
         > span {

webapp/channels/src/sass/routes/_error-page.scss

@@ -8,13 +8,12 @@ body {
         }
 
         .error__container {
-            display: table-cell;
+            display: block;
             max-width: 800px;
             padding: 5em 0;
             margin: 0 auto;
             color: #555;
             text-align: left;
-            vertical-align: top;
         }
 
         .error__icon {