Scroll area with scrollbar gutter

<!-- ПОРТ (registry-reui/bases/radix/components/scroll-area/c-scroll-area-5.tsx). -->
<script setup lang="ts">
// picsum.photos?random=N — НЕ сид, а обход кеша: каждый запрос отдаёт другое
// фото. В стенде это давало 15% расхождения. Статичный 1x1 пиксель, как
// в ui-avatar/block-card.
const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
import { ScrollArea } from "@/components/ui/scroll-area"
</script>

<template>
  <ScrollArea
    class="rounded-2xl h-72 w-56 border data-has-overflow-x:py-2.5 data-has-overflow-y:px-2.5"
  >
    <div class="flex w-full flex-col items-center gap-4 py-2">
      <div
        v-for="i in 10"
        :key="i"
        class="rounded-2xl relative h-36 w-full shrink-0 overflow-hidden border"
      >
        <img
          
          :src="PIXEL"
          :alt="`Image ${i}`"
          class="h-full w-full object-cover"
        />
      </div>
    </div>
  </ScrollArea>
</template>