From d231081b080ca8438da24b7dcc91d5c7d6e350e5 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Sat, 1 Nov 2025 16:13:04 +0100
Subject: [PATCH] Integrate ConfigProvider to manage body scrolling behavior
 during modal interactions

- Added ConfigProvider component to prevent body scrolling when modals are open, enhancing user experience.
- Included comments explaining the rationale behind the scroll-body setting to avoid layout shifts caused by dropdown menus.
---
 app/app.vue | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 84cd848..b361e91 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,14 +1,33 @@
+<script setup lang="ts">
+import { ConfigProvider } from 'reka-ui'
+</script>
+
 <template>
-  <div>
-    <NuxtPage />
-  </div>
+  <!-- 
+    scroll-body="false": Prevents body scrolling when modals/dialogs are open.
+    When set to false, the body element's overflow is locked while any modal component
+    (like Dialog, Sheet, etc.) is open, preventing background content from scrolling.
+    This improves UX by keeping focus on the modal content.
+    
+    Bug fix: Without this setting, opening dropdown menus (e.g., the user profile menu
+    when clicking the avatar icon) would cause the body to receive a padding-right of
+    15px, which shifted the entire page content 15px to the left. This prop prevents
+    that unwanted padding injection and layout shift.
+  -->
+  <ConfigProvider :scroll-body="false">
+    <div>
+      <NuxtPage />
+    </div>
+  </ConfigProvider>
 </template>
 
 <style>
 /* Critical CSS - Loaded immediately to prevent FOUC */
 html {
-  background-color: #1e1440; /* purple-darkest */
-  color: #f8fafc; /* white/slate-50 */
+  background-color: #1e1440;
+  /* purple-darkest */
+  color: #f8fafc;
+  /* white/slate-50 */
   font-family: 'Roboto', system-ui, -apple-system, sans-serif;
 }