1 files changed, 14 insertions, 1 deletions
diff --git a/app/assets/javascripts/design_management/router/index.js b/app/assets/javascripts/design_management/router/index.js
index 7dc92f55d47..7494da002c8 100644
--- a/app/assets/javascripts/design_management/router/index.js
+++ b/app/assets/javascripts/design_management/router/index.js
@@ -2,6 +2,9 @@ import $ from 'jquery';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import routes from './routes';
+import { DESIGN_ROUTE_NAME } from './constants';
+import { getPageLayoutElement } from '~/design_management/utils/design_management_utils';
+import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../constants';
 
 Vue.use(VueRouter);
 
@@ -11,10 +14,20 @@ export default function createRouter(base) {
     mode: 'history',
     routes,
   });
+  const pageEl = getPageLayoutElement();
 
-  router.beforeEach(({ meta: { el } }, from, next) => {
+  router.beforeEach(({ meta: { el }, name }, _, next) => {
     $(`#${el}`).tab('show');
 
+    // apply a fullscreen layout style in Design View (a.k.a design detail)
+    if (pageEl) {
+      if (name === DESIGN_ROUTE_NAME) {
+        pageEl.classList.add(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+      } else {
+        pageEl.classList.remove(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+      }
+    }
+
     next();
   });