From 5f3b8fb8c8f35046e91dde7d913d302a1017287a Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Wed, 29 Oct 2025 12:25:19 +0900
Subject: [PATCH] fix: Add viewport constraint to dropdown heights and improve
 filter layout (#6358)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../widget/WorkflowTemplateSelectorDialog.vue | 88 ++++++++++---------
 src/components/input/MultiSelect.vue          |  2 +-
 src/components/input/SingleSelect.vue         |  2 +-
 3 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index c64a8e19d..fc2ea1fec 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/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">
-        <!-- Model Filter -->
-        <MultiSelect
-          v-model="selectedModelObjects"
-          v-model:search-query="modelSearchText"
-          class="w-[250px]"
-          :label="modelFilterLabel"
-          :options="modelOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--cpu]" />
-          </template>
-        </MultiSelect>
+      <div class="relative flex flex-wrap justify-between gap-2 px-6 pb-4">
+        <div class="flex flex-wrap gap-2">
+          <!-- Model Filter -->
+          <MultiSelect
+            v-model="selectedModelObjects"
+            v-model:search-query="modelSearchText"
+            class="w-[250px]"
+            :label="modelFilterLabel"
+            :options="modelOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--cpu]" />
+            </template>
+          </MultiSelect>
 
-        <!-- Use Case Filter -->
-        <MultiSelect
-          v-model="selectedUseCaseObjects"
-          :label="useCaseFilterLabel"
-          :options="useCaseOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--target]" />
-          </template>
-        </MultiSelect>
+          <!-- Use Case Filter -->
+          <MultiSelect
+            v-model="selectedUseCaseObjects"
+            :label="useCaseFilterLabel"
+            :options="useCaseOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--target]" />
+            </template>
+          </MultiSelect>
 
-        <!-- License Filter -->
-        <MultiSelect
-          v-model="selectedLicenseObjects"
-          :label="licenseFilterLabel"
-          :options="licenseOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--file-text]" />
-          </template>
-        </MultiSelect>
+          <!-- License Filter -->
+          <MultiSelect
+            v-model="selectedLicenseObjects"
+            :label="licenseFilterLabel"
+            :options="licenseOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--file-text]" />
+            </template>
+          </MultiSelect>
+        </div>
 
         <!-- Sort Options -->
-        <div class="absolute right-5">
+        <div>
           <SingleSelect
             v-model="sortBy"
             :label="$t('templateWorkflows.sorting', 'Sort by')"
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index e5f878f06..851439a3a 100644
--- a/src/components/input/MultiSelect.vue
+++ b/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: {
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 98465b51d..21814b520 100644
--- a/src/components/input/SingleSelect.vue
+++ b/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: {