diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 94539fb71d..f8b688ffce 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -1,5 +1,5 @@
 :root {
-  --d-sidebar-width: 16em;
+  --d-sidebar-width: #{$d-sidebar-width};
   --d-sidebar-animation-time: 0.25s;
   --d-sidebar-animation-ease: ease-in-out;
 }
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 9e203d0215..ece3dbf6e2 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -16,10 +16,22 @@ $breakpoints: (
   extra-large: 1140px,
 );
 
-@mixin breakpoint($bp, $rule: max-width, $type: screen) {
+@mixin breakpoint($bp, $rule: max-width, $type: screen, $sidebar: false) {
   @media #{$type} and (#{$rule}: map-get($breakpoints, $bp)) {
     @content;
   }
+
+  // if you want to consider the sidebar in your breakpoint
+  // you can pass in $sidebar: true
+  // note that your breakpoint will need to be at the root level
+  @if $sidebar {
+    // when the sidebar is shown, we want to increase the breakpoints by the width of the sidebar
+    @media #{$type} and (#{$rule}: calc(#{map-get($breakpoints, $bp)} + #{$d-sidebar-width})) {
+      .has-sidebar-page {
+        @content;
+      }
+    }
+  }
 }
 
 // CSS3 properties
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 47d7795d8b..1600c031c1 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -14,6 +14,8 @@ $topic-body-width-padding: 11px;
 $topic-avatar-width: 45px;
 $reply-area-max-width: 1475px !default;
 
+$d-sidebar-width: 16em !default;
+
 // Brand color variables
 // --------------------------------------------------
 
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 915dcbca7b..19c5e9aee0 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -196,7 +196,7 @@
 
 /* Tablet (portrait) ----------- */
 
-@include breakpoint(medium) {
+@include breakpoint(medium, $sidebar: true) {
   // slightly smaller font, tighten spacing on nav pills
   .nav-pills {
     > li > a {