From d1aaffc4dda343fd3151d5981e80f5cafb5b0cae Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Sun, 6 Jul 2025 14:59:20 +0530
Subject: [PATCH 1/2] allows dropdowns and overlays inside modals to overflow
 the modal content area, preventing them from being clipped or truncated.

---
 src/lib/components/confirm.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/lib/components/confirm.svelte b/src/lib/components/confirm.svelte
index fa23d1b71c..9c3e293d54 100644
--- a/src/lib/components/confirm.svelte
+++ b/src/lib/components/confirm.svelte
@@ -68,3 +68,9 @@
         </svelte:fragment>
     </Dialog>
 </Form>
+
+<style>
+    :global(dialog section) {
+        overflow: visible !important;
+    }
+</style>

From 46f4801d722e78507ff334822cdee2e371895f5c Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 9 Jul 2025 12:08:49 +0530
Subject: [PATCH 2/2] fix:used portal and removed css hack

---
 src/lib/components/columnSelector.svelte   | 4 +++-
 src/lib/components/confirm.svelte          | 6 ------
 src/lib/components/viewSelector.svelte     | 3 ++-
 src/lib/layout/displaySettingsModal.svelte | 3 ++-
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index 42db1b9b59..9f52046c4a 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -10,11 +10,13 @@
         columns,
         isCustomCollection = false,
         allowNoColumns = false,
+        portal = false,
         children
     }: {
         columns: Writable<Column[]>;
         isCustomCollection?: boolean;
         allowNoColumns?: boolean;
+        portal?: boolean;
         children: Snippet<[toggle: () => void, selectedColumnsNumber: number]>;
     } = $props();
 
@@ -91,7 +93,7 @@
 
 <svelte:window on:resize={calcMaxHeight} />
 {#if $columns?.length}
-    <Popover let:toggle placement="bottom-end" padding="none">
+    <Popover let:toggle placement="bottom-end" padding="none" {portal}>
         {@render children(toggle, selectedColumnsNumber)}
         <svelte:fragment slot="tooltip">
             <div style:max-height={maxHeight} style:overflow="scroll" bind:this={containerRef}>
diff --git a/src/lib/components/confirm.svelte b/src/lib/components/confirm.svelte
index 9c3e293d54..fa23d1b71c 100644
--- a/src/lib/components/confirm.svelte
+++ b/src/lib/components/confirm.svelte
@@ -68,9 +68,3 @@
         </svelte:fragment>
     </Dialog>
 </Form>
-
-<style>
-    :global(dialog section) {
-        overflow: visible !important;
-    }
-</style>
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 02f4dcbf23..a77029df38 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -4,6 +4,7 @@
     import type { Column } from '$lib/helpers/types';
     import { Icon, Button } from '@appwrite.io/pink-svelte';
     import { IconViewBoards } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
     import ViewToggle from './viewToggle.svelte';
     import ColumnSelector from './columnSelector.svelte';
 
@@ -16,7 +17,7 @@
 </script>
 
 {#if !hideColumns && view === View.Table}
-    <ColumnSelector {columns} {isCustomCollection} {allowNoColumns}>
+    <ColumnSelector {columns} {isCustomCollection} {allowNoColumns} portal={$isSmallViewport}>
         {#snippet children(toggle, selectedColumnsNumber)}
             <Button.Button
                 size="s"
diff --git a/src/lib/layout/displaySettingsModal.svelte b/src/lib/layout/displaySettingsModal.svelte
index 7d6004debc..ce2cd9f09e 100644
--- a/src/lib/layout/displaySettingsModal.svelte
+++ b/src/lib/layout/displaySettingsModal.svelte
@@ -5,6 +5,7 @@
     import type { Column } from '$lib/helpers/types';
     import { IconViewBoards } from '@appwrite.io/pink-icons-svelte';
     import { Button, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
     import type { Writable } from 'svelte/store';
 
     let {
@@ -35,7 +36,7 @@
         {#if !hideColumns && $columns?.length}
             <Layout.Stack gap="xs">
                 <Typography.Text>Columns</Typography.Text>
-                <ColumnSelector {columns} {isCustomCollection}>
+                <ColumnSelector {columns} {isCustomCollection} portal={$isSmallViewport}>
                     {#snippet children(toggle, selectedColumnsNumber)}
                         <Button.Button
                             size="s"