fix reporting multiselect dropdowns max height, fixes ST-414

This commit is contained in:
Gregor Vostrak
2024-09-09 14:16:40 +02:00
committed by Constantin Graf
parent f0705e1e4a
commit d211e962f5
5 changed files with 7 additions and 5 deletions

View File

@@ -136,7 +136,9 @@ function updateValue(project: Project) {
placeholder="Search for a project..." /> placeholder="Search for a project..." />
</ComboboxAnchor> </ComboboxAnchor>
<ComboboxContent> <ComboboxContent>
<ComboboxViewport ref="dropdownViewport" class="w-60"> <ComboboxViewport
ref="dropdownViewport"
class="w-60 max-h-60 overflow-y-scroll">
<ComboboxItem <ComboboxItem
v-if="searchValue === ''" v-if="searchValue === ''"
class="data-[highlighted]:bg-card-background-active" class="data-[highlighted]:bg-card-background-active"

View File

@@ -142,7 +142,7 @@ const highlightedItem = computed(() => {
ref="searchInput" ref="searchInput"
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full" class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
placeholder="Search for a client..." /> placeholder="Search for a client..." />
<div ref="dropdownViewport" class="w-60"> <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
<div <div
v-if=" v-if="
searchValue.length > 0 && filteredClients.length === 0 searchValue.length > 0 && filteredClients.length === 0

View File

@@ -165,7 +165,7 @@ const highlightedItem = computed(() => {
ref="searchInput" ref="searchInput"
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full" class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
:placeholder="searchPlaceholder" /> :placeholder="searchPlaceholder" />
<div ref="dropdownViewport" class="w-60"> <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
<div <div
v-for="item in filteredItems" v-for="item in filteredItems"
:key="props.getKeyFromItem(item)" :key="props.getKeyFromItem(item)"

View File

@@ -125,7 +125,7 @@ watch(open, () => {
<slot name="trigger"> </slot> <slot name="trigger"> </slot>
</template> </template>
<template #content> <template #content>
<div ref="dropdownViewport" class="w-60"> <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
<div <div
v-for="item in filteredItems" v-for="item in filteredItems"
:key="props.getKeyFromItem(item) ?? 'none'" :key="props.getKeyFromItem(item) ?? 'none'"

View File

@@ -187,7 +187,7 @@ const showCreateTagModal = ref(false);
ref="searchInput" ref="searchInput"
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full" class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
placeholder="Search for a Tag..." /> placeholder="Search for a Tag..." />
<div ref="dropdownViewport" class="w-60 max-h-48 overflow-y-scroll"> <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
<div <div
v-for="tag in filteredTags" v-for="tag in filteredTags"
:key="tag.id" :key="tag.id"