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/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"