diff --git a/app/assets/stylesheets/common/base/personal-message.scss b/app/assets/stylesheets/common/base/personal-message.scss
index 4f392f26d5e..a1337db954f 100644
--- a/app/assets/stylesheets/common/base/personal-message.scss
+++ b/app/assets/stylesheets/common/base/personal-message.scss
@@ -83,15 +83,6 @@
     margin-top: 0.5em;
   }
 
-  .small-action-desc.timegap {
-    flex: 0 0 auto;
-    padding: 0 1em;
-    margin-top: -1.75em;
-    margin-left: -1em;
-    background: var(--secondary);
-    max-width: calc(758px - 1.5em);
-  }
-
   .post-notice {
     margin-bottom: 1em;
     border: none;
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index 4df2d643954..7b2a48ac706 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -350,7 +350,7 @@
 
 .reviewable-score-reason {
   margin: 0.5em 0;
-  max-width: $topic-body-width;
+  max-width: var(--topic-body-width);
   margin-bottom: 0.5em;
 }
 
@@ -358,7 +358,7 @@
   margin: 0.5em 0;
 
   .reviewable-conversation-post {
-    max-width: $topic-body-width;
+    max-width: var(--topic-body-width);
     margin-bottom: 0.5em;
 
     .username {
@@ -405,8 +405,7 @@
   .reviewable-post-header {
     display: flex;
     justify-content: space-between;
-    max-width: $topic-body-width;
-    width: $topic-body-width;
+    width: var(--topic-body-width);
     align-items: center;
 
     .reviewable-reply-to {
@@ -426,7 +425,7 @@
   }
 
   .post-body {
-    max-width: $topic-body-width;
+    max-width: var(--topic-body-width);
     max-height: 300px;
     margin-top: 0.5em;
     overflow-y: auto;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 9aebb72bd74..0468dee57b0 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -35,9 +35,9 @@ $quote-share-maxwidth: 150px;
 }
 
 .placeholder-text {
-  margin-left: 11px;
+  margin-left: var(--topic-body-width-padding);
   display: inline-block;
-  width: calc(100% - 11px);
+  width: calc(100% - var(--topic-body-width-padding));
   height: 1.5em;
   margin-bottom: 0.6em;
 }
@@ -1084,7 +1084,8 @@ blockquote > *:last-child {
 }
 
 .gap {
-  padding: 0.25em 0 0.5em 56px; // 45px (topic avatar) + 11px (margin) = 56px
+  padding: 0.25em 0 0.5em
+    calc(var(--topic-avatar-width) + var(--topic-body-width-padding));
   color: var(--primary-med-or-secondary-high);
   cursor: pointer;
   text-transform: uppercase;
@@ -1120,17 +1121,20 @@ blockquote > *:last-child {
 .small-action {
   display: flex;
   align-items: center;
-  max-width: 758px;
-  border-top: 1px solid var(--primary-low);
+
+  .topic-avatar,
+  .small-action-desc {
+    border-top: 1px solid var(--primary-low);
+  }
+
   .topic-avatar {
     align-self: flex-start;
     padding: 0.7em 0;
-    border-top: none;
-    margin-right: 11px;
     flex: 0 0 auto;
+    width: var(--topic-avatar-width);
     .d-icon {
       font-size: 2em;
-      width: 45px;
+      width: var(--topic-avatar-width);
       text-align: center;
       color: var(--primary-low-mid);
     }
@@ -1145,15 +1149,18 @@ blockquote > *:last-child {
   }
 
   .small-action-desc {
+    box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    flex: 1 1 100%;
     align-items: center;
-    padding: 1em 0;
+    padding: 1em 0 1em var(--topic-body-width-padding);
     text-transform: uppercase;
     font-weight: bold;
     font-size: var(--font-down-1);
     color: var(--primary-medium);
+    width: calc(
+      var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
+    );
     min-width: 0; // Allows flex container to shrink
 
     button {
@@ -1408,8 +1415,9 @@ a.mention-group {
 
 .signup-cta {
   box-sizing: border-box;
-  max-width: calc(#{$topic-body-width} + 4.5em);
-  padding: 3em 5em 2em 56px; // 45px (topic avatar) + 11px (margin) = 56px
+  max-width: calc(var(--topic-body-width) + 4.5em);
+  padding: 3em 5em 2em
+    calc(var(--topic-avatar-width + var(--topic-body-width-padding)));
   @include breakpoint(mobile-extra-large) {
     padding: 1.5em 1.5em 0.25em;
   }
@@ -1453,11 +1461,11 @@ a.mention-group {
   display: flex;
   width: 100%;
   max-width: calc(
-    #{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} -
-      (0.8em * 2)
+    var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+      var(--topic-avatar-width)
   );
-  padding: 0.8em;
-
+  padding: var(--topic-body-width-padding);
+  padding-left: 0;
   &.old {
     background-color: unset;
     color: var(--primary-medium);
@@ -1473,8 +1481,9 @@ a.mention-group {
 
   .d-icon {
     font-size: 2em;
+    width: var(--topic-avatar-width);
     color: var(--primary-high);
-    margin-right: 0.65em;
+    margin-right: var(--topic-body-width-padding);
   }
 }
 
@@ -1558,8 +1567,8 @@ a.mention-group {
   justify-content: center;
   align-items: center;
   max-width: calc(
-    #{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} -
-      (0.8em * 2)
+    var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+      var(--topic-avatar-width)
   );
 
   .filtered-avatar {
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 99df950ce8b..183034f0bb4 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -217,7 +217,10 @@ $topic-progress-height: 42px;
 .topic-timer-info {
   border-top: 1px solid var(--primary-low);
   margin: 0;
-  max-width: 758px;
+  max-width: calc(
+    var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+      var(--topic-avatar-width)
+  );
   &:empty {
     padding: 0;
   }
@@ -291,9 +294,12 @@ a.badge-category {
     display: flex;
     flex-wrap: wrap;
     box-sizing: border-box;
-    max-width: 758px;
+    max-width: calc(
+      var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+        var(--topic-avatar-width)
+    );
     #edit-title {
-      flex: 1 1 auto;
+      flex: 1 1 100%;
     }
     .category-chooser,
     .mini-tag-chooser {
@@ -304,11 +310,14 @@ a.badge-category {
       }
     }
     .mini-tag-chooser {
-      margin-left: 2%;
+      margin-left: 2%; // category/tag chooser are 49% wide, so this is 1% * 2
       @media all and (max-width: 500px) {
         margin-left: 0;
       }
     }
+    .edit-controls {
+      flex: 1 1 100%;
+    }
     .select-kit .category-row {
       max-width: unset;
     }
@@ -464,8 +473,8 @@ a.topic-featured-link {
 .topic-area {
   .pending-posts {
     max-width: calc(
-      #{$topic-body-width} + #{$topic-avatar-width} + #{$topic-body-width-padding *
-        2}
+      var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+        var(--topic-avatar-width)
     );
     .reviewable-item {
       .post-body {
@@ -480,8 +489,8 @@ a.topic-featured-link {
   justify-content: space-between;
   padding-bottom: 1em;
   max-width: calc(
-    #{$topic-body-width} + #{$topic-avatar-width} + #{$topic-body-width-padding *
-      2}
+    var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+      var(--topic-avatar-width)
   );
   align-items: center;
 
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 56627397a7c..56d9b5b1fc1 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -14,6 +14,12 @@ $topic-body-width-padding: 11px;
 $topic-avatar-width: 45px;
 $reply-area-max-width: 1475px !default;
 
+:root {
+  --topic-body-width: #{$topic-body-width};
+  --topic-body-width-padding: #{$topic-body-width-padding};
+  --topic-avatar-width: #{$topic-avatar-width};
+}
+
 $d-sidebar-width: 16em !default;
 
 // Brand color variables
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index c3eaebca036..3191fa32c28 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -36,11 +36,11 @@
 
 section.post-menu-area {
   position: relative;
-  padding-left: 11px;
+  padding-left: var(--topic-body-width-padding);
 }
 
 .post-links-container {
-  margin-left: 11px;
+  margin-left: var(--topic-body-width-padding);
 }
 
 nav.post-controls {
@@ -103,7 +103,9 @@ nav.post-controls {
     }
   }
   .show-replies {
-    margin-left: -11px; // negates padding-left on .cooked, for visual alignment
+    margin-left: calc(
+      var(--topic-body-width-padding) * -1
+    ); // negates padding-left on .cooked, for visual alignment
     .d-icon {
       margin-right: var(--control-icon-space);
     }
@@ -176,7 +178,6 @@ pre.codeblock-buttons:hover {
   &.bottom {
     border-top: none;
     margin-bottom: 20px;
-    margin-left: 11px;
     &.hidden {
       display: block;
       opacity: 0;
@@ -199,8 +200,11 @@ pre.codeblock-buttons:hover {
     .collapse-down {
       transform: translate(-50%, 55%);
     }
-    margin-left: 56px;
-    width: 699px;
+    margin-left: var(--topic-avatar-width);
+    width: calc(
+      var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+        var(--topic-avatar-width) - (var(--topic-avatar-width + 2px))
+    ); // 2px accounts for left and right borders
     .row {
       border-bottom: none;
       .topic-avatar,
@@ -249,7 +253,7 @@ pre.codeblock-buttons:hover {
 }
 
 .topic-map {
-  margin: 20px 0 20px 11px;
+  margin: 20px 0 20px var(--topic-body-width-padding);
   .map {
     .secondary {
       text-align: center;
@@ -324,7 +328,10 @@ pre.codeblock-buttons:hover {
 }
 
 #topic-footer-buttons {
-  max-width: calc(690px + (11px * 2) + 45px);
+  max-width: calc(
+    var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
+      var(--topic-avatar-width)
+  );
 
   @media screen and (max-width: 924px) {
     .topic-footer-main-buttons {
@@ -363,7 +370,7 @@ span.post-count {
 
 button.expand-post {
   margin-top: 10px;
-  margin-left: $topic-body-width-padding;
+  margin-left: var(--topic-body-width-padding);
 }
 
 iframe {
@@ -459,23 +466,26 @@ blockquote {
 
 // variables are used to calculate the width of .gap
 .topic-body {
-  width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2));
+  width: calc(var(--topic-body-width) + (var(--topic-body-width-padding) * 2));
   float: left;
   min-width: 0; // prevents some elements, like <pre>, from blowing out the width
   position: relative;
   border-top: 1px solid var(--primary-low);
   padding: 12px 0 0 0;
   .topic-meta-data {
-    padding: 0 $topic-body-width-padding 0.25em $topic-body-width-padding;
+    padding: 0 var(--topic-body-width-padding) 0.25em
+      var(--topic-body-width-padding);
   }
   .cooked {
-    padding: 1em $topic-body-width-padding 0.25em $topic-body-width-padding;
+    padding: 1em var(--topic-body-width-padding) 0.25em
+      var(--topic-body-width-padding);
   }
   .group-request {
-    padding: 0.5em $topic-body-width-padding 0 $topic-body-width-padding;
+    padding: 0.5em var(--topic-body-width-padding) 0
+      var(--topic-body-width-padding);
   }
   a.expand-hidden {
-    padding-left: $topic-body-width-padding;
+    padding-left: var(--topic-body-width-padding);
   }
 }
 
@@ -495,8 +505,8 @@ blockquote {
 .topic-area > .loading-container {
   // loader needs to be same width as posts
   width: calc(
-    #{$topic-avatar-width} + #{$topic-body-width} +
-      (#{$topic-body-width-padding} * 2)
+    var(--topic-body-width) + var(--topic-avatar) +
+      (var(--topic-body-width-padding) * 2)
   );
   max-width: 100%;
   @media all and (max-width: 790px) {