chore: restore wrapped chips, trim unused scopes, and complete env docs

frontend/src/components/SuggestionChips.vue

@@ -6,59 +6,27 @@ defineEmits<{ pick: [suggestion: string] }>()
 </script>
 
 <template>
-  <div class="frame">
-    <div class="chips" role="region" :aria-label="messages.suggestionChipsRegionLabel" tabindex="0">
-      <button
-        v-for="suggestion in suggestions"
-        :key="suggestion"
-        class="chip"
-        type="button"
-        @click="$emit('pick', suggestion)"
-      >
-        {{ suggestion }}
-      </button>
-    </div>
+  <div class="chips" role="region" :aria-label="messages.suggestionChipsRegionLabel">
+    <button
+      v-for="suggestion in suggestions"
+      :key="suggestion"
+      class="chip"
+      type="button"
+      @click="$emit('pick', suggestion)"
+    >
+      {{ suggestion }}
+    </button>
   </div>
 </template>
 
 <style scoped>
-.frame {
-  position: relative;
-  min-width: 0;
-  overflow: hidden;
-  background: var(--c-surface-raised);
-  border: 1px solid var(--c-line);
-  border-radius: var(--r-md);
-}
-
-.frame::after {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  bottom: var(--s-3);
-  width: var(--s-10);
-  pointer-events: none;
-  content: '';
-  background: linear-gradient(to right, transparent, var(--c-surface-raised));
-}
-
 .chips {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   gap: var(--s-3);
-  padding: var(--s-3) var(--s-10) var(--s-3) var(--s-3);
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  scrollbar-color: var(--c-line-strong) transparent;
-  scrollbar-width: thin;
-}
-
-.chips:focus-visible {
-  outline-offset: -3px;
 }
 
 .chip {
-  flex: none;
   padding: var(--s-3) 15px;
   color: var(--c-text-chip);
   font-size: var(--t-small);

frontend/tests/resultPresentation.test.ts

@@ -150,14 +150,14 @@ describe('result presentation', () => {
     expect(scrollIntoView).toHaveBeenCalledWith({ block: 'start' })
   })
 
-  it('keeps suggestions in a labeled focusable row', () => {
+  it('keeps suggestions in a labeled region', () => {
     const onPick = vi.fn()
     const suggestions = ['Focus', 'Energy', 'Surprise']
     const root = mountComponent(SuggestionChips, { suggestions, onPick })
     const region = root.querySelector<HTMLElement>('[aria-label="Listening suggestions"]')
     const buttons = root.querySelectorAll<HTMLButtonElement>('button')
 
-    expect(region?.tabIndex).toBe(0)
+    expect(region).not.toBeNull()
     expect(buttons).toHaveLength(suggestions.length)
     expect([...buttons].map((button) => button.textContent?.trim())).toEqual(suggestions)