From 2b86f011f786376c28ee57ef591f8c92345c6069 Mon Sep 17 00:00:00 2001
From: krokosik <krokosik@pm.me>
Date: Sun, 12 Apr 2026 10:14:39 +0200
Subject: [PATCH] Enable non portalled rendering for popovers

---
 src/components/AddExpense/DateSelector.tsx   | 12 ++++++++--
 src/components/Expense/ExpenseDetails.tsx    |  8 ++++++-
 src/components/Friend/CurrencyConversion.tsx |  1 +
 src/components/ui/popover.tsx                | 23 +++++++++++++++-----
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/AddExpense/DateSelector.tsx b/src/components/AddExpense/DateSelector.tsx
index d3b1bcd5..55af3ee2 100644
--- a/src/components/AddExpense/DateSelector.tsx
+++ b/src/components/AddExpense/DateSelector.tsx
@@ -6,7 +6,15 @@ import { CalendarIcon } from 'lucide-react';
 import { Calendar } from '../ui/calendar';
 import type { DayPickerProps, PropsSingleRequired } from 'react-day-picker';
 
-export const DateSelector: React.FC<DayPickerProps & PropsSingleRequired> = (calendarProps) => {
+type DateSelectorProps = DayPickerProps &
+  PropsSingleRequired & {
+    popoverPortalled?: boolean;
+  };
+
+export const DateSelector: React.FC<DateSelectorProps> = ({
+  popoverPortalled = true,
+  ...calendarProps
+}) => {
   const { t, toUIDate } = useTranslationWithUtils();
 
   return (
@@ -28,7 +36,7 @@ export const DateSelector: React.FC<DayPickerProps & PropsSingleRequired> = (cal
             )}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0">
+        <PopoverContent className="w-auto p-0" portalled={popoverPortalled}>
           <Calendar fixedWeeks {...calendarProps} />
         </PopoverContent>
       </Popover>
diff --git a/src/components/Expense/ExpenseDetails.tsx b/src/components/Expense/ExpenseDetails.tsx
index 3af6731a..99bddd32 100644
--- a/src/components/Expense/ExpenseDetails.tsx
+++ b/src/components/Expense/ExpenseDetails.tsx
@@ -364,7 +364,13 @@ export const EditSettlement: React.FC<{ expense: ExpenseDetailsOutput }> = ({ ex
           className="mx-auto mt-4 w-37.5 text-center text-lg"
           onValueChange={onCurrencyInputValueChange}
         />
-        <DateSelector mode="single" required selected={expenseDate} onSelect={setExpenseDate} />
+        <DateSelector
+          mode="single"
+          required
+          selected={expenseDate}
+          onSelect={setExpenseDate}
+          popoverPortalled={false}
+        />
       </div>
     </AppDrawer>
   );
diff --git a/src/components/Friend/CurrencyConversion.tsx b/src/components/Friend/CurrencyConversion.tsx
index ae62e63a..8e927591 100644
--- a/src/components/Friend/CurrencyConversion.tsx
+++ b/src/components/Friend/CurrencyConversion.tsx
@@ -274,6 +274,7 @@ export const CurrencyConversion: React.FC<{
                     disabled={dateDisabled}
                     selected={rateDate}
                     onSelect={setRateDate}
+                    popoverPortalled={false}
                   />
                 </div>
               </div>
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 9f183282..fe78ca3e 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -7,11 +7,18 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+> {
+  portalled?: boolean;
+  container?: HTMLElement | null;
+}
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+  PopoverContentProps
+>(({ className, align = 'center', sideOffset = 4, portalled = true, container, ...props }, ref) => {
+  const content = (
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
@@ -22,8 +29,14 @@ const PopoverContent = React.forwardRef<
       )}
       {...props}
     />
-  </PopoverPrimitive.Portal>
-));
+  );
+
+  if (!portalled) {
+    return content;
+  }
+
+  return <PopoverPrimitive.Portal container={container}>{content}</PopoverPrimitive.Portal>;
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent };