diff --git a/webapp/channels/src/sass/base/_structure.scss b/webapp/channels/src/sass/base/_structure.scss index a436ff217e..350227bd36 100644 --- a/webapp/channels/src/sass/base/_structure.scss +++ b/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 { diff --git a/webapp/channels/src/sass/components/_announcement-bar.scss b/webapp/channels/src/sass/components/_announcement-bar.scss index a277c354c8..e2addc6cbb 100644 --- a/webapp/channels/src/sass/components/_announcement-bar.scss +++ b/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 { diff --git a/webapp/channels/src/sass/routes/_error-page.scss b/webapp/channels/src/sass/routes/_error-page.scss index e07ba8424f..cb0e883e9a 100644 --- a/webapp/channels/src/sass/routes/_error-page.scss +++ b/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 {