fix(frontend): refine streamed presentation and resolve stream edge cases

frontend/src/components/ResultSet.vue

@@ -1,14 +1,28 @@
 <script setup lang="ts">
-import { messages } from '../lib/messages'
+import { computed } from 'vue'
+import { formatMessage } from '../lib/messages'
 import type { TrackEvent } from '../lib/types'
 import TrackCard from './TrackCard.vue'
 
-defineProps<{ tracks: TrackEvent[] }>()
+const props = defineProps<{ tracks: TrackEvent[] }>()
+const regionLabel = computed(() =>
+  formatMessage(
+    props.tracks.length === 1
+      ? 'resultSetRecommendedTrackLabel'
+      : 'resultSetRecommendedTracksLabel',
+    { count: props.tracks.length },
+  ),
+)
 </script>
 
 <template>
-  <div class="set" :aria-label="messages.resultSetRecommendedTracksLabel">
-    <TrackCard v-for="event in tracks" :key="event.track.id" :event="event" />
+  <div class="set" role="region" :aria-label="regionLabel" tabindex="0">
+    <TrackCard
+      v-for="(event, index) in tracks"
+      :key="event.track.id"
+      :event="event"
+      :style="`--card-order: ${index}`"
+    />
   </div>
 </template>
 
@@ -17,5 +31,18 @@ defineProps<{ tracks: TrackEvent[] }>()
   display: flex;
   flex-direction: column;
   gap: var(--s-2);
+  max-height: min(42dvh, 480px);
+  padding: var(--s-2) var(--s-3) var(--s-2) 0;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  border-block: 1px solid var(--c-line);
+  scrollbar-color: var(--c-line-strong) transparent;
+  scrollbar-width: thin;
+}
+
+@media (max-width: 560px) {
+  .set {
+    max-height: min(34dvh, 360px);
+  }
 }
 </style>