UX: Retry "left-align title with content for sidebar (#18202)" (#18242)

Reverts #18241 and fixes issues with the original PR:

1. Remove an extraneous `margin-left: auto` from a grid cell (this was causing the buggy behavior in webkit)
2. Add `grid-area` name to `.extra-info-wrapper`
3. Account for `.wrap` padding
4. Remove unused css (`.header-row` and inner styles)

app/assets/javascripts/discourse/app/widgets/header-contents.js

@@ -2,16 +2,18 @@ import { createWidget } from "discourse/widgets/widget";
 import hbs from "discourse/widgets/hbs-compiler";
 
 createWidget("header-contents", {
-  tagName: "div.contents.clearfix",
+  tagName: "div.contents",
   template: hbs`
-    {{#if this.site.desktopView}}
-      {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
-        {{#if attrs.sidebarEnabled}}
-          {{sidebar-toggle attrs=attrs}}
+    <div class="header-logo-wrapper">
+      {{#if this.site.desktopView}}
+        {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
+          {{#if attrs.sidebarEnabled}}
+            {{sidebar-toggle attrs=attrs}}
+          {{/if}}
         {{/if}}
       {{/if}}
-    {{/if}}
-    {{home-logo attrs=attrs}}
+      {{home-logo attrs=attrs}}
+    </div>
     {{#if attrs.topic}}
       {{header-topic-info attrs=attrs}}
     {{/if}}

app/assets/stylesheets/common/base/header.scss

@@ -19,33 +19,32 @@
     height: 100%;
 
     .contents {
-      display: flex;
+      display: grid;
+      grid-template-areas: "logo-wrapper extra-info panel";
+      grid-template-columns: auto 1fr auto;
       align-items: center;
       height: 100%;
 
-      .header-row {
-        width: 100%;
-
-        .logo-wrapper {
-          float: left;
-        }
-        .auth-buttons {
-          float: right;
-          margin-top: 0.4em;
-
-          .login-button,
-          .signup-button {
-            padding: 8px 14px;
-          }
-        }
+      .has-sidebar-page & {
+        // 10px is a .wrap padding
+        grid-template-columns:
+          minmax(calc(var(--d-sidebar-width) - 10px), auto)
+          1fr auto;
       }
     }
   }
 
+  .header-logo-wrapper {
+    grid-area: logo-wrapper;
+    display: flex;
+    align-items: center;
+  }
+
   .title {
     display: flex;
     align-items: center;
     height: 100%;
+
     a,
     a:visited {
       color: var(--header_primary);
@@ -61,10 +60,10 @@
   }
 
   .panel {
+    grid-area: panel;
     position: relative;
     display: flex;
     flex: 0 0 auto;
-    margin-left: auto;
     align-items: center;
   }
 
@@ -212,6 +211,8 @@
 }
 
 .header-sidebar-toggle {
+  grid-area: hamburger;
+
   button {
     margin-right: 1em;
     box-sizing: content-box; // matches other header icons
@@ -242,6 +243,7 @@
 
 // topic info in the header
 .extra-info-wrapper {
+  grid-area: extra-info;
   display: flex;
   align-items: center;
   height: 100%;
@@ -249,6 +251,7 @@
   padding: 0 1.5em 0 0.5em;
   // we need to hide overflow in both to truncate the title in a flexbox
   overflow: hidden;
+
   .extra-info {
     overflow: hidden;
     width: 100%;

app/assets/stylesheets/desktop/discourse.scss

@@ -199,19 +199,3 @@ 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);
-    }
-  }
-}