fix: Add viewport constraint to dropdown heights and improve filter layout (#6358)

## Summary
Fixed dropdown components exceeding viewport on mobile/tablet
environments and improved workflow template selector dialog filter
layout.

https://github.com/Comfy-Org/ComfyUI_frontend/issues/6153

## Changes

### 1. Dropdown Height Constraints (MultiSelect & SingleSelect)
- Applied CSS `min()` function to use the smaller value between
`listMaxHeight` prop and 50% viewport height
- Ensures dropdowns don't overflow on devices with smaller viewport
heights like tablets and mobiles

### 2. Workflow Template Dialog Layout Improvements
- Grouped filters (Model, Use Case, License) on the left side
- Positioned Sort by option on the right for clearer visual hierarchy
- Used `justify-between` to place filters and sort options at opposite
ends

## Test Plan
- [ ] Verify dropdown works correctly on desktop browsers
- [ ] Confirm dropdown doesn't exceed 50vh on tablet viewport
- [ ] Confirm dropdown doesn't exceed 50vh on mobile viewport
- [ ] Check workflow template dialog filter/sort layout

## Screenshots
**Before**

[before.webm](https://github.com/user-attachments/assets/64b4b969-54ed-4463-abdf-0a4adef01e72)

**After**

[after.webm](https://github.com/user-attachments/assets/b38973e5-9e77-4882-adf8-306279d302e1)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -36,53 +36,55 @@
     </template>
 
     <template #contentFilter>
-      <div class="relative flex flex-wrap gap-2 px-6 pt-2 pb-4">
+      <div class="relative flex flex-wrap justify-between gap-2 px-6 pb-4">
-        <!-- Model Filter -->
+        <div class="flex flex-wrap gap-2">
-        <MultiSelect
+          <!-- Model Filter -->
-          v-model="selectedModelObjects"
+          <MultiSelect
-          v-model:search-query="modelSearchText"
+            v-model="selectedModelObjects"
-          class="w-[250px]"
+            v-model:search-query="modelSearchText"
-          :label="modelFilterLabel"
+            class="w-[250px]"
-          :options="modelOptions"
+            :label="modelFilterLabel"
-          :show-search-box="true"
+            :options="modelOptions"
-          :show-selected-count="true"
+            :show-search-box="true"
-          :show-clear-button="true"
+            :show-selected-count="true"
-        >
+            :show-clear-button="true"
-          <template #icon>
+          >
-            <i class="icon-[lucide--cpu]" />
+            <template #icon>
-          </template>
+              <i class="icon-[lucide--cpu]" />
-        </MultiSelect>
+            </template>
+          </MultiSelect>
 
-        <!-- Use Case Filter -->
+          <!-- Use Case Filter -->
-        <MultiSelect
+          <MultiSelect
-          v-model="selectedUseCaseObjects"
+            v-model="selectedUseCaseObjects"
-          :label="useCaseFilterLabel"
+            :label="useCaseFilterLabel"
-          :options="useCaseOptions"
+            :options="useCaseOptions"
-          :show-search-box="true"
+            :show-search-box="true"
-          :show-selected-count="true"
+            :show-selected-count="true"
-          :show-clear-button="true"
+            :show-clear-button="true"
-        >
+          >
-          <template #icon>
+            <template #icon>
-            <i class="icon-[lucide--target]" />
+              <i class="icon-[lucide--target]" />
-          </template>
+            </template>
-        </MultiSelect>
+          </MultiSelect>
 
-        <!-- License Filter -->
+          <!-- License Filter -->
-        <MultiSelect
+          <MultiSelect
-          v-model="selectedLicenseObjects"
+            v-model="selectedLicenseObjects"
-          :label="licenseFilterLabel"
+            :label="licenseFilterLabel"
-          :options="licenseOptions"
+            :options="licenseOptions"
-          :show-search-box="true"
+            :show-search-box="true"
-          :show-selected-count="true"
+            :show-selected-count="true"
-          :show-clear-button="true"
+            :show-clear-button="true"
-        >
+          >
-          <template #icon>
+            <template #icon>
-            <i class="icon-[lucide--file-text]" />
+              <i class="icon-[lucide--file-text]" />
-          </template>
+            </template>
-        </MultiSelect>
+          </MultiSelect>
+        </div>
 
         <!-- Sort Options -->
-        <div class="absolute right-5">
+        <div>
           <SingleSelect
             v-model="sortBy"
             :label="$t('templateWorkflows.sorting', 'Sort by')"

src/components/input/MultiSelect.vue

@@ -242,7 +242,7 @@ const pt = computed(() => ({
     )
   },
   listContainer: () => ({
-    style: { maxHeight: listMaxHeight },
+    style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
     class: 'scrollbar-custom'
   }),
   list: {

src/components/input/SingleSelect.vue

@@ -158,7 +158,7 @@ const pt = computed(() => ({
     )
   },
   listContainer: () => ({
-    style: `max-height: ${listMaxHeight}`,
+    style: `max-height: min(${listMaxHeight}, 50vh)`,
     class: 'scrollbar-custom'
   }),
   list: {