From e1a195aad58d6aefa4c4b44f1b30f590c1141fa2 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 9 Apr 2025 11:58:05 +0200
Subject: [PATCH] Fix: Set bigger popover

---
 src/lib/components/filters/filters.svelte | 73 ++++++++++++-----------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index 6d9e7067f..f8c9a3e6e 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -138,45 +138,48 @@
             {/if}
         </Button>
         <svelte:fragment slot="tooltip">
-            <Layout.Stack gap="s">
-                {#if displayQuickFilters}
-                    <slot name="quick" />
-                {:else}
-                    <p>Apply filter rules to refine the table view</p>
-                    <Content
-                        bind:columnId={selectedColumn}
-                        bind:operatorKey
-                        bind:value
-                        bind:arrayValues
-                        {columns}
-                        {singleCondition}
-                        on:apply={afterApply}
-                        on:clear={() => (applied = 0)} />
-                {/if}
-                <div
-                    class="u-flex u-cross-center u-margin-block-start-16"
-                    class:u-main-end={!quickFilters}
-                    class:u-main-space-between={quickFilters}>
-                    {#if quickFilters}
-                        <Button
-                            text
-                            on:click={() => (displayQuickFilters = !displayQuickFilters)}
-                            class="u-margin-block-end-auto">
-                            {displayQuickFilters ? 'Advanced filters' : 'Quick filters'}
-                        </Button>
+            <div style:width="420px">
+                <Layout.Stack gap="s">
+                    {#if displayQuickFilters}
+                        <slot name="quick" />
+                    {:else}
+                        <p>Apply filter rules to refine the table view</p>
+                        <Content
+                            bind:columnId={selectedColumn}
+                            bind:operatorKey
+                            bind:value
+                            bind:arrayValues
+                            {columns}
+                            {singleCondition}
+                            on:apply={afterApply}
+                            on:clear={() => (applied = 0)} />
                     {/if}
-                    <div class="u-flex u-gap-8">
-                        {#if singleCondition}
-                            <Button size="s" text on:click={toggleDropdown}>Cancel</Button>
-                        {:else}
-                            <Button size="s" disabled={applied === 0} text on:click={clearAll}>
-                                Clear all
+                    <div
+                        class="u-flex u-cross-center u-margin-block-start-16"
+                        class:u-main-end={!quickFilters}
+                        class:u-main-space-between={quickFilters}>
+                        {#if quickFilters}
+                            <Button
+                                text
+                                on:click={() => (displayQuickFilters = !displayQuickFilters)}
+                                class="u-margin-block-end-auto">
+                                {displayQuickFilters ? 'Advanced filters' : 'Quick filters'}
                             </Button>
                         {/if}
-                        <Button size="s" on:click={apply} disabled={isButtonDisabled}>Apply</Button>
+                        <div class="u-flex u-gap-8">
+                            {#if singleCondition}
+                                <Button size="s" text on:click={toggleDropdown}>Cancel</Button>
+                            {:else}
+                                <Button size="s" disabled={applied === 0} text on:click={clearAll}>
+                                    Clear all
+                                </Button>
+                            {/if}
+                            <Button size="s" on:click={apply} disabled={isButtonDisabled}
+                                >Apply</Button>
+                        </div>
                     </div>
-                </div>
-            </Layout.Stack>
+                </Layout.Stack>
+            </div>
         </svelte:fragment>
     </Popover>
 </div>