diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js
index 46b68ebe158..a780e673d6b 100644
--- a/app/assets/javascripts/contextual_sidebar.js
+++ b/app/assets/javascripts/contextual_sidebar.js
@@ -9,7 +9,7 @@ export default class ContextualSidebar {
   }
 
   initDomElements() {
-    this.$page = $('.page-with-sidebar');
+    this.$page = $('.layout-page');
     this.$sidebar = $('.nav-sidebar');
     this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
     this.$overlay = $('.mobile-overlay');
diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
index ba2b6737988..bf77b93b643 100644
--- a/app/assets/javascripts/issuable_bulk_update_sidebar.js
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -21,7 +21,7 @@ export default class IssuableBulkUpdateSidebar {
   }
 
   initDomElements() {
-    this.$page = $('.page-with-sidebar');
+    this.$page = $('.layout-page');
     this.$sidebar = $('.right-sidebar');
     this.$sidebarInnerContainer = this.$sidebar.find('.issuable-sidebar');
     this.$bulkEditCancelBtn = $('.js-bulk-update-menu-hide');
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index dcc0fa63b63..d52cae22738 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -128,7 +128,7 @@ $(function () {
   });
 
   if (bootstrapBreakpoint === 'xs') {
-    const $rightSidebar = $('aside.right-sidebar, .page-with-sidebar');
+    const $rightSidebar = $('aside.right-sidebar, .layout-page');
 
     $rightSidebar
       .removeClass('right-sidebar-expanded')
@@ -188,7 +188,7 @@ $(function () {
     trigger: 'focus',
     // set the viewport to the main content, excluding the navigation bar, so
     // the navigation can't overlap the popover
-    viewport: '.page-with-sidebar'
+    viewport: '.layout-page'
   });
   $('.trigger-submit').on('change', function () {
     return $(this).parents('form').submit();
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index fa7f6825d7e..ec85b8b6529 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -42,11 +42,11 @@ import Cookies from 'js-cookie';
       if ($thisIcon.hasClass('fa-angle-double-right')) {
         $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
         $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-        $('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+        $('.layout-page').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
       } else {
         $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
         $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-        $('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+        $('.layout-page').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
 
         if (gl.lazyLoader) gl.lazyLoader.loadCheck();
       }
@@ -173,7 +173,7 @@ import Cookies from 'js-cookie';
 
     Sidebar.prototype.setCollapseAfterUpdate = function($block) {
       $block.addClass('collapse-after-update');
-      return $('.page-with-sidebar').addClass('with-overlay');
+      return $('.layout-page').addClass('with-overlay');
     };
 
     Sidebar.prototype.onSidebarDropdownHidden = function(e) {
@@ -187,7 +187,7 @@ import Cookies from 'js-cookie';
     Sidebar.prototype.sidebarDropdownHidden = function($block) {
       if ($block.hasClass('collapse-after-update')) {
         $block.removeClass('collapse-after-update');
-        $('.page-with-sidebar').removeClass('with-overlay');
+        $('.layout-page').removeClass('with-overlay');
         return this.toggleSidebar('hide');
       }
     };
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index e6bd270a3cc..3f0268541a4 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -106,11 +106,11 @@ body {
   }
 }
 
-.page-with-sidebar > .content-wrapper {
+.layout-page > .content-wrapper {
   min-height: calc(100vh - #{$header-height});
 }
 
-.with-performance-bar .page-with-sidebar {
+.with-performance-bar .layout-page {
   margin-top: $header-height + $performance-bar-height;
 }
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 3683afa07de..ea5599d5f52 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -415,7 +415,7 @@
   margin: 5px;
 }
 
-.page-with-contextual-sidebar.page-with-sidebar .issue-boards-sidebar {
+.page-with-contextual-sidebar.layout-page .issue-boards-sidebar {
   .issuable-sidebar-header {
     position: relative;
   }
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 226d665e33b..eba9cd253bb 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,4 +1,4 @@
-.page-with-sidebar{ class: page_with_sidebar_class }
+.layout-page{ class: page_with_sidebar_class }
   - if defined?(nav) && nav
     = render "layouts/nav/sidebar/#{nav}"
   .content-wrapper
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index 5505f983d71..72790eb215a 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -41,7 +41,7 @@ import '~/right_sidebar';
         loadFixtures(fixtureName);
         this.sidebar = new Sidebar;
         $aside = $('.right-sidebar');
-        $page = $('.page-with-sidebar');
+        $page = $('.layout-page');
         $icon = $aside.find('i');
         $toggle = $aside.find('.js-sidebar-toggle');
         return $labelsIcon = $aside.find('.sidebar-collapsed-icon');