From 43e8fc764a240caefd184eee83d5dda7e68861e4 Mon Sep 17 00:00:00 2001
From: Laputa App <laputa@app.local>
Date: Fri, 27 Feb 2026 16:58:10 +0100
Subject: [PATCH] fix: property dropdowns adapt to narrow panel width

- Popover and Select components: add collisionPadding=8 as default
- TypeSelector and AddPropertyForm SelectContent: position=popper, side=left
- DateValue and AddDateInput PopoverContent: side=left
Dropdowns now flip direction when hitting viewport edge instead of clipping.
---
 src-tauri/target                          | 1 +
 src/components/DynamicPropertiesPanel.tsx | 8 ++++----
 src/components/ui/popover.tsx             | 2 ++
 src/components/ui/select.tsx              | 2 ++
 4 files changed, 9 insertions(+), 4 deletions(-)
 create mode 120000 src-tauri/target

diff --git a/src-tauri/target b/src-tauri/target
new file mode 120000
index 00000000..251f8ace
--- /dev/null
+++ b/src-tauri/target
@@ -0,0 +1 @@
+/Users/luca/Workspace/laputa-app/src-tauri/target
\ No newline at end of file
diff --git a/src/components/DynamicPropertiesPanel.tsx b/src/components/DynamicPropertiesPanel.tsx
index 6d29cfb6..f9222cf2 100644
--- a/src/components/DynamicPropertiesPanel.tsx
+++ b/src/components/DynamicPropertiesPanel.tsx
@@ -148,7 +148,7 @@ function DateValue({ value, onSave }: {
           <span className={`min-w-0 truncate${!formatted ? ' text-muted-foreground' : ''}`}>{formatted || 'Pick a date\u2026'}</span>
         </button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="end" data-testid="date-picker-popover">
+      <PopoverContent className="w-auto p-0" align="end" side="left" data-testid="date-picker-popover">
         <Calendar
           mode="single"
           selected={selectedDate}
@@ -272,7 +272,7 @@ function AddDateInput({ value, onChange }: { value: string; onChange: (v: string
           </span>
         </button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
+      <PopoverContent className="w-auto p-0" align="start" side="left">
         <Calendar
           mode="single"
           selected={selectedDate}
@@ -358,7 +358,7 @@ function AddPropertyForm({ onAdd, onCancel, vaultStatuses }: {
         >
           <SelectValue />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent position="popper" side="left">
           {DISPLAY_MODE_OPTIONS.map(opt => {
             const OptIcon = DISPLAY_MODE_ICONS[opt.value]
             return (
@@ -428,7 +428,7 @@ function TypeSelector({ isA, customColorKey, availableTypes, onUpdateProperty, o
         >
           <SelectValue placeholder="None" />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent position="popper" side="left">
           <SelectItem value={TYPE_NONE}>None</SelectItem>
           <SelectSeparator />
           {options.map(type => (
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 444211f3..c618fe7e 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -19,6 +19,7 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  collisionPadding = 8,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
   return (
@@ -27,6 +28,7 @@ function PopoverContent({
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[12000] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
           className
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index e437f056..141cd421 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -53,6 +53,7 @@ function SelectContent({
   children,
   position = "item-aligned",
   align = "center",
+  collisionPadding = 8,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
@@ -67,6 +68,7 @@ function SelectContent({
         )}
         position={position}
         align={align}
+        collisionPadding={collisionPadding}
         {...props}
       >
         <SelectScrollUpButton />