fix: scrollable quick filter area

This commit is contained in:
Shariq Ansari 2025-02-28 16:06:10 +05:30
parent 63dbe6cae7
commit 6e16869a40

View File

@ -62,10 +62,13 @@
v-else-if="customizeQuickFilter" v-else-if="customizeQuickFilter"
class="flex items-center justify-between gap-2 p-5" class="flex items-center justify-between gap-2 p-5"
> >
<div class="flex gap-2"> <FadedScrollableDiv
class="flex flex-1 items-center gap-2 overflow-x-auto -ml-1"
orientation="horizontal"
>
<template v-for="filter in newQuickFilters" :key="filter.fieldname"> <template v-for="filter in newQuickFilters" :key="filter.fieldname">
<Tooltip :text="filter.fieldname"> <Tooltip :text="filter.fieldname">
<Button :label="filter.label" class="group"> <Button :label="filter.label" class="group whitespace-nowrap">
<template #suffix> <template #suffix>
<FeatherIcon <FeatherIcon
class="h-3.5 cursor-pointer group-hover:flex hidden" class="h-3.5 cursor-pointer group-hover:flex hidden"
@ -83,6 +86,7 @@
> >
<template #target="{ togglePopover }"> <template #target="{ togglePopover }">
<Button <Button
class="whitespace-nowrap mr-4"
variant="ghost" variant="ghost"
@click="togglePopover()" @click="togglePopover()"
:label="__('Add filter')" :label="__('Add filter')"
@ -100,7 +104,8 @@
</Tooltip> </Tooltip>
</template> </template>
</Autocomplete> </Autocomplete>
</div> </FadedScrollableDiv>
<div class="-ml-2 h-[70%] border-l" />
<div class="flex gap-1"> <div class="flex gap-1">
<Button <Button
:label="__('Save')" :label="__('Save')"