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

@@ -0,0 +1 @@
+/Users/luca/Workspace/laputa-app/src-tauri/target

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 => (

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

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