diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 68975dbea86..f9bc31a50c6 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -22,8 +22,9 @@
   grid-template-columns: auto auto;
   > .row {
     grid-area: posts;
-    max-width: 100%;
-    overflow: hidden;
+    max-width: calc(
+      100vw - 16px
+    ); // 16px is the left + right padding on .wrap in common/base/discourse.scss
   }
 
   .timeline-container {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index e16a85dc734..c315f546374 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -592,9 +592,6 @@ blockquote {
 }
 
 .gap {
-  width: calc(
-    #{$topic-avatar-width} + #{$topic-body-width} + 2 * #{$topic-body-width-padding}
-  );
   box-sizing: border-box;
 }
 
@@ -604,6 +601,10 @@ blockquote {
     #{$topic-avatar-width} + #{$topic-body-width} +
       (#{$topic-body-width-padding} * 2)
   );
+  @media all and (max-width: 790px) {
+    // 16px is the left + right padding on .wrap in common/base/discourse.scss
+    max-width: calc(100vw - 16px);
+  }
 }
 
 /* hide the reply border above the time gap notices */