From a327890b5732614c76838ab775da11a744195ebd Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 18 Mar 2026 01:10:36 +0800
Subject: [PATCH] Fix dropdown clipping: use fixed positioning to escape
 overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UserActionsMenu and SnoozeDropdown were clipped by parent containers
with overflow-x-auto/overflow-y-auto. Switch from absolute to fixed
positioning — compute viewport-relative coordinates on open via
getBoundingClientRect. Dropdowns now render above all overflow
boundaries.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/admin/UserActionsMenu.tsx  | 16 +++++++++++--
 .../components/reminders/SnoozeDropdown.tsx   | 23 +++++++++++++++----
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/admin/UserActionsMenu.tsx b/frontend/src/components/admin/UserActionsMenu.tsx
index 60c99d5..b808e7b 100644
--- a/frontend/src/components/admin/UserActionsMenu.tsx
+++ b/frontend/src/components/admin/UserActionsMenu.tsx
@@ -46,6 +46,8 @@ export default function UserActionsMenu({ user, currentUsername }: UserActionsMe
   const [roleSubmenuOpen, setRoleSubmenuOpen] = useState(false);
   const [tempPassword, setTempPassword] = useState<string | null>(null);
   const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [menuPos, setMenuPos] = useState<{ top: number; right: number } | null>(null);
 
   const updateRole = useUpdateRole();
   const resetPassword = useResetPassword();
@@ -123,10 +125,17 @@ export default function UserActionsMenu({ user, currentUsername }: UserActionsMe
   return (
     <div ref={menuRef} className="relative">
       <Button
+        ref={buttonRef}
         variant="ghost"
         size="icon"
         className="h-7 w-7"
-        onClick={() => setOpen((v) => !v)}
+        onClick={() => {
+          if (!open && buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setMenuPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
+          }
+          setOpen((v) => !v);
+        }}
         aria-label="User actions"
       >
         {isLoading ? (
@@ -137,7 +146,10 @@ export default function UserActionsMenu({ user, currentUsername }: UserActionsMe
       </Button>
 
       {open && (
-        <div className="absolute right-0 top-8 z-50 min-w-[200px] rounded-lg border bg-card shadow-lg py-1">
+        <div
+          className="fixed z-50 min-w-[200px] rounded-lg border bg-card shadow-lg py-1"
+          style={menuPos ? { top: menuPos.top, right: menuPos.right } : undefined}
+        >
           {/* Edit Role */}
           <div className="relative">
             <button
diff --git a/frontend/src/components/reminders/SnoozeDropdown.tsx b/frontend/src/components/reminders/SnoozeDropdown.tsx
index 7363cfd..6e6cfdc 100644
--- a/frontend/src/components/reminders/SnoozeDropdown.tsx
+++ b/frontend/src/components/reminders/SnoozeDropdown.tsx
@@ -17,6 +17,8 @@ const DEFAULT_OPTIONS: { value: number; label: string }[] = [
 export default function SnoozeDropdown({ onSnooze, label, direction = 'up', options = DEFAULT_OPTIONS }: SnoozeDropdownProps) {
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [menuPos, setMenuPos] = useState<{ top?: number; bottom?: number; right: number } | null>(null);
 
   useEffect(() => {
     if (!open) return;
@@ -39,7 +41,18 @@ export default function SnoozeDropdown({ onSnooze, label, direction = 'up', opti
   return (
     <div className="relative" ref={ref}>
       <button
-        onClick={() => setOpen(!open)}
+        ref={buttonRef}
+        onClick={() => {
+          if (!open && buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            if (direction === 'up') {
+              setMenuPos({ bottom: window.innerHeight - rect.top + 4, right: window.innerWidth - rect.right });
+            } else {
+              setMenuPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
+            }
+          }
+          setOpen(!open);
+        }}
         aria-label={`Snooze "${label}"`}
         aria-expanded={open}
         aria-haspopup="menu"
@@ -49,9 +62,11 @@ export default function SnoozeDropdown({ onSnooze, label, direction = 'up', opti
         <span className="text-[11px] font-medium">Snooze</span>
       </button>
       {open && (
-        <div role="menu" className={`absolute right-0 w-32 rounded-md border bg-popover shadow-lg z-50 py-1 animate-fade-in ${
-          direction === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'
-        }`}>
+        <div
+          role="menu"
+          className="fixed w-32 rounded-md border bg-popover shadow-lg z-50 py-1 animate-fade-in"
+          style={menuPos ? { ...menuPos } : undefined}
+        >
           {options.map((opt) => (
             <button
               key={opt.value}