From be708ea94365a04c718d58d45767f3bd3fc6558f Mon Sep 17 00:00:00 2001
From: EmanuelPlaysDev <156924421+EmanuelPlays@users.noreply.github.com>
Date: Mon, 17 Aug 2026 13:27:04 +0200
Subject: [PATCH] fix #7172

The issue is in App.vue. The CSS variables are initialized once, but --right-bar-width needs to be dynamic based on sidebar visibility.
---
 apps/app-frontend/src/App.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 3db155776b..9f1bbf08f7 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1935,11 +1935,16 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 </template>
 
 <style lang="scss" scoped>
-.app-grid-layout,
+.app-grid-layout {
+	--top-bar-height: 3rem;
+	--left-bar-width: 4rem;
+	--right-bar-width: 0px;
+}
+
 .app-contents {
 	--top-bar-height: 3rem;
 	--left-bar-width: 4rem;
-	--right-bar-width: 300px;
+	--right-bar-width: 0px;
 }
 
 .app-grid-layout {
@@ -1971,6 +1976,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 }
 
 .app-contents {
+	--top-bar-height: 3rem;
+	--left-bar-width: 4rem;
+	--right-bar-width: 0px;
+
 	position: absolute;
 	z-index: 1;
 	left: var(--left-bar-width);
@@ -1986,6 +1995,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	// transition: grid-template-columns 0.4s ease-in-out;
 
 	&.sidebar-enabled {
+		--right-bar-width: 300px;
 		grid-template-columns: 1fr 300px;
 	}
 }