fix(stage-ui): save button always visible

packages/stage-pages/src/pages/settings/modules/consciousness.vue

@@ -223,6 +223,7 @@ function handleDeleteProvider(providerId: string) {
             :custom-input-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.custom_model_placeholder')"
             :expand-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.expand')"
             :collapse-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.collapse')"
+            expanded-class="mb-12"
             @update:custom-value="updateCustomModelName"
           />
         </template>

packages/stage-pages/src/pages/settings/modules/hearing.vue

@@ -652,6 +652,7 @@ onUnmounted(() => {
                 :custom-input-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.custom_model_placeholder')"
                 :expand-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.expand')"
                 :collapse-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.collapse')"
+                expanded-class="mb-12"
                 @update:custom-value="updateCustomModelName"
               />
             </template>

packages/stage-pages/src/pages/settings/modules/speech.vue

@@ -412,6 +412,7 @@ function handleDeleteProvider(providerId: string) {
                     :custom-input-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.custom_model_placeholder')"
                     :expand-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.expand')"
                     :collapse-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.collapse')"
+                    expanded-class="mb-12"
                     @update:custom-value="updateCustomModelName"
                   />
                 </template>

packages/stage-pages/src/pages/settings/modules/vision.vue

@@ -262,6 +262,7 @@ function formatRelativeTime(timestamp: number | null) {
             :custom-input-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.custom_model_placeholder')"
             :expand-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.expand')"
             :collapse-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.collapse')"
+            expanded-class="mb-12"
             @update:custom-value="updateCustomModelName"
           />
         </template>

packages/stage-ui/src/components/menu/radio-card-many-select.vue

@@ -27,6 +27,7 @@ interface Props {
   listClass?: string
   allowCustom?: boolean
   customOptionDescription?: string
+  expandedClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -105,7 +106,12 @@ function updateCustomValue(value: string) {
 </script>
 
 <template>
-  <div class="radio-card-detail-many-select">
+  <div
+    :class="[
+      'radio-card-detail-many-select',
+      isListExpanded ? props.expandedClass : '',
+    ]"
+  >
     <!-- Search bar -->
     <div v-if="searchable" class="relative" inline-flex="~" w-full items-center>
       <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
@@ -154,7 +160,7 @@ function updateCustomValue(value: string) {
                 : props.listClass
               )
               : isListExpanded
-                ? ['max-h-[calc(100dvh-7lh)] overflow-y-auto']
+                ? ['max-h-[calc(100dvh-22lh)] overflow-y-auto'] // TODO: hardcoded 22lh doesn't work in many hearing/vision components
                 : []
             ),
           ]"
@@ -195,6 +201,7 @@ function updateCustomValue(value: string) {
             flex items-center justify-center gap-2 rounded-lg py-2 transition="all duration-200 ease-in-out"
             :class="[
               isListExpanded ? 'bg-primary-500 hover:bg-primary-600 text-white' : 'bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800',
+              isListExpanded ? 'absolute bottom--14' : '',
             ]"
             @click="isListExpanded = !isListExpanded"
           >

packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-model-selection.vue

@@ -27,7 +27,11 @@ const {
 </script>
 
 <template>
-  <div h-full flex flex-col gap-4>
+  <div
+    :class="[
+      'h-full flex flex-col gap-4 relative overflow-y-hidden',
+    ]"
+  >
     <div sticky top-0 z-100 flex flex-shrink-0 items-center gap-2>
       <button outline-none @click="props.onPrevious">
         <div i-solar:alt-arrow-left-line-duotone h-5 w-5 />
@@ -67,7 +71,7 @@ const {
         :custom-input-placeholder="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.custom_model_placeholder')"
         :expand-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.expand')"
         :collapse-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.collapse')"
-        list-class="max-h-[calc(100dvh-17rem)] sm:max-h-120 overflow-y-auto"
+        list-class="max-h-[calc(100dvh-20rem)] overflow-y-auto"
       />
 
       <Alert v-if="activeProviderModelError" type="error">
@@ -82,13 +86,20 @@ const {
       </Alert>
     </div>
 
-    <!-- Action Buttons -->
-    <Button
-      variant="primary"
-      :disabled="!activeModel"
-      :loading="isLoadingActiveProviderModels"
-      :label="t('settings.dialogs.onboarding.saveAndContinue')"
-      @click="props.onNext"
-    />
+    <div
+      :class="[
+        'absolute bottom-0 w-full',
+      ]"
+    >
+      <!-- Action Buttons -->
+      <Button
+        variant="primary"
+        class="w-full"
+        :disabled="!activeModel"
+        :loading="isLoadingActiveProviderModels"
+        :label="t('settings.dialogs.onboarding.saveAndContinue')"
+        @click="props.onNext"
+      />
+    </div>
   </div>
 </template>