diff --git a/app/assets/javascripts/discourse/app/widgets/header-contents.js b/app/assets/javascripts/discourse/app/widgets/header-contents.js
index f3f4225e8d1..7a5ccf8df4e 100644
--- a/app/assets/javascripts/discourse/app/widgets/header-contents.js
+++ b/app/assets/javascripts/discourse/app/widgets/header-contents.js
@@ -2,18 +2,16 @@ import { createWidget } from "discourse/widgets/widget";
import hbs from "discourse/widgets/hbs-compiler";
createWidget("header-contents", {
- tagName: "div.contents",
+ tagName: "div.contents.clearfix",
template: hbs`
-
+ {{/if}}
+ {{home-logo attrs=attrs}}
{{#if attrs.topic}}
{{header-topic-info attrs=attrs}}
{{/if}}
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 0e84e567af0..75afb83d929 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -19,12 +19,7 @@
height: 100%;
.contents {
- display: grid;
- grid-template-areas: "logo-wrapper extra-info panel";
- grid-template-columns: auto 1fr auto;
- .has-sidebar-page & {
- grid-template-columns: minmax(var(--d-sidebar-width), auto) 1fr auto;
- }
+ display: flex;
align-items: center;
height: 100%;
@@ -47,12 +42,6 @@
}
}
- .header-logo-wrapper {
- grid-area: logo-wrapper;
- display: flex;
- align-items: center;
- }
-
.title {
display: flex;
align-items: center;
@@ -72,7 +61,6 @@
}
.panel {
- grid-area: panel;
position: relative;
display: flex;
flex: 0 0 auto;
@@ -224,7 +212,6 @@
}
.header-sidebar-toggle {
- grid-area: hamburger;
button {
margin-right: 1em;
box-sizing: content-box; // matches other header icons
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 564b57fac57..780aa903ef5 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -199,3 +199,19 @@ body.has-sidebar-page {
padding-left: 0;
}
}
+
+@media (prefers-reduced-motion: no-preference) {
+ body.sidebar-animate {
+ #main-outlet-wrapper {
+ // grid-template-columns transition supported in Firefox, Chrome support coming summer 2022
+ transition-property: grid-template-columns, max-width;
+ transition-timing-function: var(--d-sidebar-animation-ease);
+ transition-duration: var(--d-sidebar-animation-time);
+ }
+
+ .d-header-wrap .wrap {
+ transition: max-width var(--d-sidebar-animation-time)
+ var(--d-sidebar-animation-ease);
+ }
+ }
+}