From 8aabf86abb2cee03618d8d727f79f077ec84bbb2 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 02:20:42 +0100
Subject: [PATCH] fix(base): make property type-picker popover scrollable with
 responsive width

---
 .../property/create-property-popover.tsx      | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/features/base/components/property/create-property-popover.tsx b/apps/client/src/features/base/components/property/create-property-popover.tsx
index 5a12125cc..f418e5219 100644
--- a/apps/client/src/features/base/components/property/create-property-popover.tsx
+++ b/apps/client/src/features/base/components/property/create-property-popover.tsx
@@ -231,7 +231,6 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
         onClose={noop}
         position="bottom-start"
         shadow="md"
-        width={selectedType === "formula" ? 460 : 320}
         withinPortal
       >
         <Popover.Target>
@@ -248,14 +247,24 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
           p={0}
           onClick={(e) => e.stopPropagation()}
           onKeyDown={handleKeyDown}
-          style={{ zIndex: 300 }}
+          style={{
+            zIndex: 300,
+            minWidth: selectedType === "formula" ? 460 : 320,
+            maxWidth: "calc(100vw - 32px)",
+          }}
         >
           {panel === "typePicker" && (
             <Stack gap={0} p={4}>
-              <PropertyTypePicker
-                onSelect={handleTypeSelect}
-                showSearch
-              />
+              <ScrollArea.Autosize
+                mah="min(60vh, 400px)"
+                scrollbarSize={6}
+                offsetScrollbars
+              >
+                <PropertyTypePicker
+                  onSelect={handleTypeSelect}
+                  showSearch
+                />
+              </ScrollArea.Autosize>
             </Stack>
           )}
           {panel === "configure" && selectedType === "formula" && (