diff --git a/web/routes/uix/components/carousel/+page.svelte b/web/routes/uix/components/carousel/+page.svelte
index aa1655fdd..1f7ef2bdd 100644
--- a/web/routes/uix/components/carousel/+page.svelte
+++ b/web/routes/uix/components/carousel/+page.svelte
@@ -142,9 +142,9 @@
 			'      <Carousel.Item index={1}>Slide B</Carousel.Item>',
 			'      <Carousel.Item index={2}>Slide C</Carousel.Item>',
 			'    </Carousel.ItemGroup>',
-			'    <Carousel.PrevTrigger />',
-			'    <Carousel.NextTrigger />',
 			'  </Carousel.Viewport>',
+			'  <Carousel.PrevTrigger />',
+			'  <Carousel.NextTrigger />',
 			'  <Carousel.IndicatorGroup>',
 			'    {#each slides as _, i}',
 			'      <Carousel.Indicator index={i} />',
@@ -243,9 +243,15 @@
 									</Carousel.Item>
 								{/each}
 							</Carousel.ItemGroup>
-							<Carousel.PrevTrigger />
-							<Carousel.NextTrigger />
 						</Carousel.Viewport>
+						<!--
+							Prev/Next triggers sit OUTSIDE the viewport (siblings, not
+							children) so their pointerdown isn't intercepted by the drag
+							gesture attached to the item-group. They still anchor visually
+							via the recipe's absolute positioning against the carousel root.
+						-->
+						<Carousel.PrevTrigger />
+						<Carousel.NextTrigger />
 						<Carousel.IndicatorGroup>
 							{#each slides as _, i (i)}
 								<Carousel.Indicator index={i} />