From 0f6e40a5ba545436ee73f9361b90cb6b55b5d5f9 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 18 Mar 2026 01:20:57 +0800
Subject: [PATCH] Fix dropdown clipping: remove overflow constraints on parent
 containers

Revert fixed-positioning approach (caused z-index and placement issues).
Instead fix the root cause: parent containers with overflow that clipped
absolutely-positioned dropdowns.

- IAMPage: Remove overflow-x-auto on table wrapper (columns already
  hide via responsive classes, no horizontal scroll needed)
- AlertBanner: Remove max-h-48 overflow-y-auto on alerts list
  (alerts are naturally bounded, constraint clipped SnoozeDropdown)
- Revert UserActionsMenu and SnoozeDropdown to simple absolute positioning

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

diff --git a/frontend/src/components/admin/IAMPage.tsx b/frontend/src/components/admin/IAMPage.tsx
index 03024f5..68560c6 100644
--- a/frontend/src/components/admin/IAMPage.tsx
+++ b/frontend/src/components/admin/IAMPage.tsx
@@ -160,7 +160,7 @@ export default function IAMPage() {
               {searchQuery ? 'No users match your search.' : 'No users found.'}
             </p>
           ) : (
-            <div className="overflow-x-auto">
+            <div>
               <table className="w-full text-sm">
                 <thead>
                   <tr className="border-b border-border bg-card-elevated/50">
diff --git a/frontend/src/components/admin/UserActionsMenu.tsx b/frontend/src/components/admin/UserActionsMenu.tsx
index b808e7b..60c99d5 100644
--- a/frontend/src/components/admin/UserActionsMenu.tsx
+++ b/frontend/src/components/admin/UserActionsMenu.tsx
@@ -46,8 +46,6 @@ 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();
@@ -125,17 +123,10 @@ 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={() => {
-          if (!open && buttonRef.current) {
-            const rect = buttonRef.current.getBoundingClientRect();
-            setMenuPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
-          }
-          setOpen((v) => !v);
-        }}
+        onClick={() => setOpen((v) => !v)}
         aria-label="User actions"
       >
         {isLoading ? (
@@ -146,10 +137,7 @@ export default function UserActionsMenu({ user, currentUsername }: UserActionsMe
       </Button>
 
       {open && (
-        <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}
-        >
+        <div className="absolute right-0 top-8 z-50 min-w-[200px] rounded-lg border bg-card shadow-lg py-1">
           {/* Edit Role */}
           <div className="relative">
             <button
diff --git a/frontend/src/components/dashboard/AlertBanner.tsx b/frontend/src/components/dashboard/AlertBanner.tsx
index f9f946c..1373cf9 100644
--- a/frontend/src/components/dashboard/AlertBanner.tsx
+++ b/frontend/src/components/dashboard/AlertBanner.tsx
@@ -23,7 +23,7 @@ export default function AlertBanner({ alerts, onDismiss, onSnooze }: AlertBanner
           {alerts.length}
         </span>
       </div>
-      <div className="divide-y divide-border max-h-48 overflow-y-auto">
+      <div className="divide-y divide-border">
         {alerts.map((alert) => (
           <div
             key={alert.id}
diff --git a/frontend/src/components/reminders/SnoozeDropdown.tsx b/frontend/src/components/reminders/SnoozeDropdown.tsx
index 6e6cfdc..7363cfd 100644
--- a/frontend/src/components/reminders/SnoozeDropdown.tsx
+++ b/frontend/src/components/reminders/SnoozeDropdown.tsx
@@ -17,8 +17,6 @@ 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;
@@ -41,18 +39,7 @@ export default function SnoozeDropdown({ onSnooze, label, direction = 'up', opti
   return (
     <div className="relative" ref={ref}>
       <button
-        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);
-        }}
+        onClick={() => setOpen(!open)}
         aria-label={`Snooze "${label}"`}
         aria-expanded={open}
         aria-haspopup="menu"
@@ -62,11 +49,9 @@ export default function SnoozeDropdown({ onSnooze, label, direction = 'up', opti
         <span className="text-[11px] font-medium">Snooze</span>
       </button>
       {open && (
-        <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}
-        >
+        <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'
+        }`}>
           {options.map((opt) => (
             <button
               key={opt.value}