Scroll area with horizontal scrollbar

<!-- ПОРТ (registry-reui/bases/radix/components/scroll-area/c-scroll-area-2.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, ScrollBar } from "@/components/ui/scroll-area"
</script>

<template>
  <ScrollArea class="rounded-2xl h-auto max-w-96 border">
    <div class="flex w-max gap-4 p-4">
      <div
        v-for="i in 10"
        :key="i"
        class="rounded-2xl relative h-36 w-40 shrink-0 overflow-hidden border"
      >
        <img
          
          :src="PIXEL"
          :alt="`Image ${i}`"
          class="h-full w-full object-cover"
        />
      </div>
    </div>
    <ScrollBar orientation="horizontal" />
  </ScrollArea>
</template>