From 74554dafade09cce769b94283fbc2123e014a2d4 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Tue, 21 Apr 2026 15:46:47 +0000
Subject: [PATCH] improving UI for scolldown when adding extra columns on
 property table

---
 .../your-projects/live/PropertyTable.tsx      | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyTable.tsx b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyTable.tsx
index d91ff6d..a746fe6 100644
--- a/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyTable.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/your-projects/live/PropertyTable.tsx
@@ -317,21 +317,26 @@ export default function PropertyTable({ data, onOpenDrawer, onOpenDetail, showDo
               Columns
             </button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48">
-            <DropdownMenuLabel className="text-xs text-gray-500">
+          <DropdownMenuContent align="end" className="w-52">
+            <DropdownMenuLabel className="text-xs text-gray-500 sticky top-0 bg-white z-10">
               Toggle columns
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            {toggleableColumns.map((col) => (
-              <DropdownMenuCheckboxItem
-                key={col.id}
-                checked={col.getIsVisible()}
-                onCheckedChange={(val) => col.toggleVisibility(val)}
-                className="text-sm"
-              >
-                {COLUMN_LABELS[col.id] ?? col.id}
-              </DropdownMenuCheckboxItem>
-            ))}
+            <div className="relative">
+              <div className="max-h-72 overflow-y-auto">
+                {toggleableColumns.map((col) => (
+                  <DropdownMenuCheckboxItem
+                    key={col.id}
+                    checked={col.getIsVisible()}
+                    onCheckedChange={(val) => col.toggleVisibility(val)}
+                    className="text-sm"
+                  >
+                    {COLUMN_LABELS[col.id] ?? col.id}
+                  </DropdownMenuCheckboxItem>
+                ))}
+              </div>
+              <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent" />
+            </div>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>