Carousel arrows are cropped on small screens #3813
Description
Environment
- Operating System: Darwin
- Node Version: v22.14.0
- Nuxt Version: 3.16.1
- CLI Version: 3.23.1
- Nitro Version: 2.11.8
- Package Manager: [email protected]
- Builder: -
- User Config: devtools, modules, css, future, compatibilityDate
- Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected]
- Build Modules: -
Is this bug related to Nuxt or Vue?
Nuxt
Version
v3.0.2
Reproduction
Here is the code used from the doc :
<script setup lang="ts">
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
'https://picsum.photos/640/640?random=4',
'https://picsum.photos/640/640?random=5',
'https://picsum.photos/640/640?random=6'
]
</script>
<template>
<UCarousel v-slot="{ item }" arrows :items="items" class="w-full max-w-xs mx-auto">
<img :src="item" width="320" height="320" class="rounded-lg">
</UCarousel>
</template>
Display the page in a mobile frame using devtools
Description
Hello
On small screens carousel arrows seem to be outside of the screen.
Using the demo code from the doc in a fresh new project I get this :
Using a max-w-2xs fixes the issue, but is this scenario supposed to be handled by the component itself (ie, should arrows be part of the component width) ?
Additional context
No response