You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.3 KiB
41 lines
1.3 KiB
<script setup lang="ts">
|
|
// 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.
|
|
import { ConfigProvider } from 'reka-ui'
|
|
import CartResponsive from '~/components/Cart/CartResponsive.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<ConfigProvider :scroll-body="false">
|
|
<div>
|
|
<NuxtPage />
|
|
|
|
<!-- Responsive Cart: Slides from right on desktop, bottom on mobile -->
|
|
<CartResponsive />
|
|
</div>
|
|
</ConfigProvider>
|
|
</template>
|
|
|
|
<style>
|
|
/* Critical CSS - Loaded immediately to prevent FOUC */
|
|
html {
|
|
background-color: #1e1440;
|
|
/* purple-darkest */
|
|
color: #f8fafc;
|
|
/* white/slate-50 */
|
|
font-family: 'Roboto', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
}
|
|
</style>
|
|
|