fix(web): bound the model quick-switch dropdown to the space above its pill

The dropdown opened upward with no height limit, so a long provider model list ran past the top of the window and the models above the fold could not be reached. Measure the pill on open and cap the menu, letting it scroll.

Author: elkaix

apps/pythinker-web/src/components/Composer.vue

@@ -735,12 +735,18 @@ const hasUpload = computed(() => !!props.uploadImage);
 // ---------------------------------------------------------------------------
 
 const dropdownOpen = ref(false);
+const modelPillRef = ref<HTMLElement | null>(null);
+const modelDropdownStyle = ref<Record<string, string>>({});
 const permDropdownOpen = ref(false);
 const toolbarRef = ref<HTMLElement | null>(null);
 
 function toggleDropdown(): void {
   dropdownOpen.value = !dropdownOpen.value;
   if (dropdownOpen.value) {
+    const rect = modelPillRef.value?.getBoundingClientRect();
+    modelDropdownStyle.value = rect
+      ? { maxHeight: `${Math.max(160, rect.top - 4 - 12)}px` }
+      : {};
     permDropdownOpen.value = false;
     document.addEventListener('click', onDocClick, true);
   } else {
@@ -1179,6 +1185,7 @@ function selectModel(modelId: string): void {
           <!-- Model pill — click to open quick-switch dropdown -->
           <span
             v-if="status"
+            ref="modelPillRef"
             class="model-pill"
             :class="{ open: dropdownOpen }"
             role="button"
@@ -1195,7 +1202,7 @@ function selectModel(modelId: string): void {
         </div>
 
         <!-- Model dropdown — current provider models + controls + more -->
-        <div v-if="dropdownOpen && status" class="model-dropdown" role="menu" @click.stop>
+        <div v-if="dropdownOpen && status" class="model-dropdown" :style="modelDropdownStyle" role="menu" @click.stop>
           <!-- Starred models from other providers -->
           <div v-if="starredOtherModels.length > 0" class="md-section">{{ t('status.starredModels') }}</div>
           <button
@@ -1719,6 +1726,7 @@ function selectModel(modelId: string): void {
   display: flex;
   flex-direction: column;
   gap: 1px;
+  overflow-y: auto;
 }
 
 .md-section {

apps/pythinker-web/test/composer.test.ts

@@ -319,6 +319,30 @@ describe('Composer model dropdown', () => {
 
     expect(wrapper.emitted('selectModel')).toEqual([['openai/gpt-5']]);
   });
+
+  it('bounds the quick-switch dropdown to the measured space above its pill', async () => {
+    const wrapper = mountComposer({
+      status: { model: 'Model 0', modelId: 'pythinker/model-0', ctxUsed: 0, ctxMax: 128000, permission: 'manual' },
+      models: Array.from({ length: 17 }, (_, index) => ({
+        id: `pythinker/model-${index}`,
+        provider: 'pythinker',
+        model: `model-${index}`,
+        displayName: `Model ${index}`,
+        maxContextSize: 128000,
+      })),
+    });
+    const pill = wrapper.get('.model-pill');
+    const rect = vi.spyOn(pill.element, 'getBoundingClientRect');
+
+    rect.mockReturnValue({ top: 20 } as DOMRect);
+    await pill.trigger('click');
+    expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('160px');
+
+    rect.mockReturnValue({ top: 300 } as DOMRect);
+    await pill.trigger('click');
+    await pill.trigger('click');
+    expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('284px');
+  });
 });
 
 describe('Composer context indicator', () => {