diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index a3aafe8b2a8b0f986a26bef9ef27f62a02610e62..09f38e4a59ba26499d4de48a04256346d2daf006 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -582,6 +582,15 @@ $sidebarOut: -330px;
         flex-direction: row;
         flex-wrap: wrap;
 
+        &.fullscreen-sidebar-shown {
+            display: grid;
+            grid-template-columns: ($sidebar-width + $sidebar-padding) calc(100vw - $sidebar-width - $sidebar-padding - 35px);
+
+            #content-wrapper {
+                max-width: 100%;
+            }
+        }
+
         #top-bar {
             max-height: unset;
             opacity: 1;
diff --git a/resources/vue/components/responsive/ResponsiveContentBar.vue b/resources/vue/components/responsive/ResponsiveContentBar.vue
index b05286a2a8e7084319cabfe0158567f2afc93b45..0622bf64e9bf824eeee8a8ceb3e443c283d1e1b7 100644
--- a/resources/vue/components/responsive/ResponsiveContentBar.vue
+++ b/resources/vue/components/responsive/ResponsiveContentBar.vue
@@ -81,7 +81,7 @@ export default {
 
                 if (!document.documentElement.classList.contains('responsive-display')) {
                     setTimeout(() => {
-                        document.body.style.display = 'flex';
+                        document.body.classList.remove('fullscreen-sidebar-shown');
                     }, 300);
                 }
 
@@ -101,7 +101,7 @@ export default {
                 }
 
                 if (!document.documentElement.classList.contains('responsive-display')) {
-                    document.body.style.display = 'grid';
+                    document.body.classList.add('fullscreen-sidebar-shown');
                 }
 
                 this.sidebarOpen = true;