<div id="associated-entries-container"
     class="overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"
     style="scroll-behavior: smooth;"
     _="on load or scroll
        -- Show arrows if content overflows (desktop only)
        if window.innerWidth >= 640 and my.scrollWidth > my.clientWidth
          remove .hidden from .entries-nav-arrow
        else
          add .hidden to .entries-nav-arrow
        end">
  <div class="flex flex-col sm:flex-row gap-1">
    {% include '_types/post/_entry_items.html' with context %}
  </div>
</div>

<style>
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>
