diff --git a/app/assets/javascripts/discourse/app/routes/application.js b/app/assets/javascripts/discourse/app/routes/application.js
index 0b02e6417fa..59aecbb31a2 100644
--- a/app/assets/javascripts/discourse/app/routes/application.js
+++ b/app/assets/javascripts/discourse/app/routes/application.js
@@ -48,6 +48,9 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
     },
 
     toggleSidebar() {
+      // enables CSS transitions, but not on did-insert
+      document.querySelector("body").classList.add("sidebar-animate");
+
       this.controllerFor("application").toggleProperty("showSidebar");
     },
 
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 40cdb225c9b..ea87cccb869 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -327,11 +327,10 @@ table {
 }
 
 .wrap {
-  @extend .clearfix;
+  max-width: var(--d-max-width);
   margin-right: auto;
   margin-left: auto;
   padding: 0 10px;
-
   .contents {
     position: relative;
   }
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 1158a7eb0ed..9a38add8d82 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -1,3 +1,7 @@
+:root {
+  --d-sidebar-width: 240px;
+}
+
 .header-sidebar-toggle {
   margin-right: 1em;
   margin-left: -10px;
@@ -49,10 +53,16 @@
     text-transform: uppercase;
     font-size: 1em;
     font-weight: bold;
-    align-items: center;
+    align-items: stretch;
   }
 
   .sidebar-section-header-link {
+    @include ellipsis;
+    flex: 1 1 auto;
+    color: var(--primary);
+    font-size: var(--font-down-1);
+    padding: 0.25em 0.5em;
+
     &:visited {
       color: var(--primary);
     }
@@ -60,11 +70,6 @@
     &:hover {
       background: var(--primary-low);
     }
-
-    flex: 1 1 auto;
-    color: var(--primary);
-    font-size: var(--font-down-1);
-    padding: 0.25em 0.5em;
   }
 
   .sidebar-section-header-button {
@@ -142,17 +147,25 @@
   }
 
   .sidebar-section-header-caret {
+    flex: 0 0 auto;
     width: 1.5em;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
+    align-items: center;
     border: none;
-    background-color: transparent;
+    background: transparent;
+    padding: 0.25em 0;
+    opacity: 0;
+    transition: opacity 0.25s;
 
     &:hover {
       opacity: 100;
     }
 
-    opacity: 0;
+    svg {
+      display: block;
+      flex: 0 0 auto;
+    }
 
     .d-icon {
       font-size: $font-down-1;
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index e46bfd77d91..c882e9af301 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -32,6 +32,7 @@ $topic-progress-height: 42px;
     max-width: calc(
       100vw - 20px
     ); // 20px is the left + right padding on .wrap in common/base/discourse.scss
+    min-width: 0; // grid needs to be able to shrink
   }
 
   .timeline-container {
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index ecd77e11f83..69ed47021b2 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -208,7 +208,7 @@
     align-self: flex-start;
 
     @media screen and (min-width: 767px) {
-      max-width: calc(#{$large-width} / 2);
+      max-width: calc(var(--d-max-width) / 2);
       margin-right: 1.5em;
     }
 
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index c3e28a3a7d0..ca066afc8be 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -116,16 +116,6 @@ pre code {
   }
 }
 
-// TODO figure out a clean place to put stuff like this
-.row:before,
-.row:after {
-  display: table;
-  content: "";
-}
-.row:after {
-  clear: both;
-}
-
 // Tables
 // --------------------------------------------------
 
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index cdd053d58db..5eea6cfcfdc 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -3,6 +3,10 @@
 // BEWARE: changing these styles implies they take effect anywhere they are seen
 // throughout the Discourse application
 
+:root {
+  --d-max-width: 1110px;
+}
+
 // Base Elements
 body.widget-dragging {
   cursor: ns-resize;
@@ -187,8 +191,11 @@ input {
   box-sizing: border-box;
   width: 100%;
   display: grid;
-  grid-template-areas: "content";
-  grid-template-columns: minmax(0, 1fr);
+  // we can CSS transition the sidebar grid width change
+  // as long as we keep the column count consistent
+  // grid transitions are only supported in Firefox at the moment, but coming summer 2022 to Chrome
+  grid-template-areas: "sidebar content";
+  grid-template-columns: 0 minmax(0, 1fr);
   gap: 0;
 
   #main-outlet {
@@ -196,8 +203,24 @@ input {
   }
 }
 
-body.has-sidebar-page #main-outlet-wrapper {
-  grid-template-areas: "sidebar content";
-  grid-template-columns: 240px 1fr;
-  gap: 0 2em;
+body.has-sidebar-page {
+  .wrap {
+    // increase page max-width to accommodate sidebar width
+    max-width: calc(var(--d-sidebar-width) + var(--d-max-width));
+  }
+  .d-header .wrap {
+    padding-left: 1.75em;
+  }
+  #main-outlet-wrapper {
+    grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
+    gap: 0 2em;
+    padding-left: 0;
+  }
+}
+
+body.sidebar-animate {
+  .d-header .wrap,
+  #main-outlet-wrapper {
+    transition: ease-in-out 0.5s;
+  }
 }
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index acb91f6ccc8..9dc4ec3c84e 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -2,7 +2,7 @@
 
 .modal.history-modal {
   .modal-inner-container {
-    max-width: $large-width;
+    max-width: var(--d-max-width);
   }
   .modal-body {
     height: 70vh;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 85faf6c057a..667a7fe4736 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -1,7 +1,3 @@
-.wrap {
-  max-width: $large-width;
-}
-
 .full-width {
   margin-left: 0;
 }
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index b7033d57d60..5e767a62339 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -120,6 +120,10 @@
   left: 0;
 }
 
+.onscreen-post .row {
+  display: flex; // children should never wrap
+}
+
 @media all and (min-width: 400px) {
   #topic-footer-main-buttons {
     max-width: 70%;