fix: modelselector positioning when calculated direction differs from preferred direction

app/components/ModelSelector.vue

@@ -20,7 +20,6 @@ const modelSelectorState = reactive({
 });
 const selectedModel = defineModel<ModelWithProvider | null>();
 
-const dropdownContentRef = ref<HTMLDivElement | null>(null);
 const dropdownButton = ref<HTMLButtonElement | null>(null);
 const searchInputRef = ref<HTMLInputElement | null>(null);
 const dropdownMaxHeight = ref<number | undefined>(undefined);
@@ -34,15 +33,7 @@ const toggleDropdown = () => {
         return;
     }
 
-    const buttonRect = dropdownButton.value?.getBoundingClientRect();
-    if (!buttonRect) return;
-    modelSelectorState.x = buttonRect.left;
-    if (modelSelectorState.direction === 'up') {
-        const pageHeight = document.body.scrollHeight;
-        modelSelectorState.y = (pageHeight - buttonRect.top) + 6;
-    } else {
-        modelSelectorState.y = buttonRect.bottom - 6;
-    }
+    console.log(modelSelectorState);
     modelSelectorState.open = true;
 
     setTimeout(() => {
@@ -80,6 +71,14 @@ const calculateDropdownPosition = () => {
         modelSelectorState.direction = 'down';
         dropdownMaxHeight.value = Math.min(spaceBelow - 20, 460);
     }
+
+    modelSelectorState.x = buttonRect.left;
+    if (modelSelectorState.direction === 'up') {
+        const pageHeight = document.body.scrollHeight;
+        modelSelectorState.y = (pageHeight - buttonRect.top) + 6;
+    } else {
+        modelSelectorState.y = buttonRect.bottom + 6;
+    }
 };
 
 const searchQuery = ref('');