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

@@ -1,14 +1,33 @@
+<script setup lang="ts">
+import { ConfigProvider } from 'reka-ui'
+</script>
+
 <template>
-  <div>
+  <!-- 
-    <NuxtPage />
+    scroll-body="false": Prevents body scrolling when modals/dialogs are open.
-  </div>
+    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 */
+  background-color: #1e1440;
-  color: #f8fafc; /* white/slate-50 */
+  /* purple-darkest */
+  color: #f8fafc;
+  /* white/slate-50 */
   font-family: 'Roboto', system-ui, -apple-system, sans-serif;
 }