Resolve "Kompakte Navigation: falsche Breite des Inhalts bei eingeblendeter Sidebar"

Closes #2432

Merge request studip/studip!1629

2 files changed, 11 insertions, 2 deletions

diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index a3aafe8..09f38e4 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 b05286a..0622bf6 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;