From cd742e077636f94daa85d29ffc4c9d60e3d86bd8 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 23 Dec 2025 01:53:19 +0000
Subject: [PATCH 1/3] Refactor: Improve dropdown alignment logic

Add logic to determine dropdown alignment based on viewport width.

Co-authored-by: eric.okuma <eric.okuma@rilldata.com>
---
 .../table/dropdownAlignment.ts                | 24 +++++++++
 .../table/users/UserActionsCell.svelte        |  2 +-
 .../table/users/UserGroupsCell.svelte         | 51 +++++++++++++++++-
 .../table/users/UserProjectsCell.svelte       | 51 +++++++++++++++++-
 .../table/users/UserRoleCell.svelte           | 54 ++++++++++++++++++-
 5 files changed, 178 insertions(+), 4 deletions(-)
 create mode 100644 web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts

diff --git a/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts b/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts
new file mode 100644
index 00000000000..08c94c976b1
--- /dev/null
+++ b/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts
@@ -0,0 +1,24 @@
+const DEFAULT_VIEWPORT_MARGIN_PX = 16;
+const DEFAULT_MENU_WIDTH_PX = 240;
+
+export function determineDropdownAlign({
+  triggerRect,
+  menuWidth,
+  viewportWidth,
+  margin = DEFAULT_VIEWPORT_MARGIN_PX,
+}: {
+  triggerRect: DOMRect | null;
+  menuWidth?: number;
+  viewportWidth: number;
+  margin?: number;
+}): "start" | "end" {
+  if (!triggerRect) return "start";
+
+  const width = typeof menuWidth === "number" ? menuWidth : DEFAULT_MENU_WIDTH_PX;
+  const projectedRightEdge = triggerRect.left + width;
+  const safeViewportRight = viewportWidth - margin;
+
+  return projectedRightEdge > safeViewportRight ? "end" : "start";
+}
+
+export const DROPDOWN_DEFAULT_MARGIN = DEFAULT_VIEWPORT_MARGIN_PX;
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserActionsCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserActionsCell.svelte
index 42d1979893b..c81461cb8db 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserActionsCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserActionsCell.svelte
@@ -81,7 +81,7 @@
         <ThreeDot size="16px" />
       </IconButton>
     </DropdownMenu.Trigger>
-    <DropdownMenu.Content align="start">
+    <DropdownMenu.Content align="end">
       {#if role === OrgUserRoles.Guest}
         <DropdownMenu.Item
           class="font-normal flex items-center"
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
index 3cd791682b9..f0eafeb23f6 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import { getUserGroupsForUsersInOrg } from "@rilldata/web-admin/features/organizations/user-management/selectors.ts";
+  import { determineDropdownAlign } from "@rilldata/web-admin/features/organizations/user-management/table/dropdownAlignment.ts";
   import * as Dropdown from "@rilldata/web-common/components/dropdown-menu";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
   import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
   import { writable } from "svelte/store";
+  import { browser } from "$app/environment";
+  import { onDestroy, onMount, tick } from "svelte";
 
   export let organization: string;
   export let userId: string;
@@ -13,6 +16,9 @@
   let isDropdownOpen = false;
   const userGroupsEnabledStore = writable(false);
   $: userGroupsEnabledStore.set(isDropdownOpen);
+  let dropdownAlign: "start" | "end" = "start";
+  let dropdownTriggerEl: HTMLElement | null = null;
+  let dropdownContentEl: HTMLElement | null = null;
 
   const userGroupsQuery = getUserGroupsForUsersInOrg(
     organization,
@@ -21,11 +27,54 @@
   );
   $: ({ data: userGroups, isPending, error } = $userGroupsQuery);
   $: hasGroups = groupCount > 0;
+
+  async function updateDropdownAlignment() {
+    if (!browser || !isDropdownOpen || !dropdownTriggerEl) return;
+    await tick();
+
+    const menuWidth =
+      dropdownContentEl?.offsetWidth ??
+      dropdownTriggerEl?.offsetWidth ??
+      200;
+
+    dropdownAlign = determineDropdownAlign({
+      triggerRect: dropdownTriggerEl.getBoundingClientRect(),
+      menuWidth,
+      viewportWidth: window.innerWidth,
+    });
+  }
+
+  function handleWindowResize() {
+    void updateDropdownAlignment();
+  }
+
+  onMount(() => {
+    if (!browser) return;
+    window.addEventListener("resize", handleWindowResize);
+  });
+
+  onDestroy(() => {
+    if (!browser) return;
+    window.removeEventListener("resize", handleWindowResize);
+  });
+
+  $: if (isDropdownOpen) {
+    void updateDropdownAlignment();
+  }
+
+  $: if (isDropdownOpen && dropdownContentEl) {
+    void updateDropdownAlignment();
+  }
+
+  $: if (isDropdownOpen && userGroups?.length !== undefined) {
+    void updateDropdownAlignment();
+  }
 </script>
 
 {#if hasGroups}
   <Dropdown.Root bind:open={isDropdownOpen}>
     <Dropdown.Trigger
+      bind:this={dropdownTriggerEl}
       class="w-18 flex flex-row gap-1 items-center rounded-sm {isDropdownOpen
         ? 'bg-slate-200'
         : 'hover:bg-slate-100'} px-2 py-1"
@@ -39,7 +88,7 @@
         <CaretDownIcon size="12px" />
       {/if}
     </Dropdown.Trigger>
-    <Dropdown.Content>
+    <Dropdown.Content bind:this={dropdownContentEl} align={dropdownAlign}>
       {#if isPending}
         Loading...
       {:else if error}
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
index dabcfd5f150..93c923932a7 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import * as Dropdown from "@rilldata/web-common/components/dropdown-menu";
+  import { determineDropdownAlign } from "@rilldata/web-admin/features/organizations/user-management/table/dropdownAlignment.ts";
   import {
     createAdminServiceListProjectsForOrganizationAndUser,
     type V1Project,
   } from "@rilldata/web-admin/client";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
   import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
+  import { browser } from "$app/environment";
+  import { onDestroy, onMount, tick } from "svelte";
 
   export let organization: string;
   export let userId: string;
@@ -28,6 +31,51 @@
   $: projects = data?.projects ?? [];
 
   $: hasProjects = projectCount > 0;
+  let dropdownAlign: "start" | "end" = "start";
+  let dropdownTriggerEl: HTMLElement | null = null;
+  let dropdownContentEl: HTMLElement | null = null;
+
+  async function updateDropdownAlignment() {
+    if (!browser || !isDropdownOpen || !dropdownTriggerEl) return;
+    await tick();
+
+    const menuWidth =
+      dropdownContentEl?.offsetWidth ??
+      dropdownTriggerEl?.offsetWidth ??
+      200;
+
+    dropdownAlign = determineDropdownAlign({
+      triggerRect: dropdownTriggerEl.getBoundingClientRect(),
+      menuWidth,
+      viewportWidth: window.innerWidth,
+    });
+  }
+
+  function handleWindowResize() {
+    void updateDropdownAlignment();
+  }
+
+  onMount(() => {
+    if (!browser) return;
+    window.addEventListener("resize", handleWindowResize);
+  });
+
+  onDestroy(() => {
+    if (!browser) return;
+    window.removeEventListener("resize", handleWindowResize);
+  });
+
+  $: if (isDropdownOpen) {
+    void updateDropdownAlignment();
+  }
+
+  $: if (isDropdownOpen && dropdownContentEl) {
+    void updateDropdownAlignment();
+  }
+
+  $: if (isDropdownOpen && projects?.length !== undefined) {
+    void updateDropdownAlignment();
+  }
 
   function getProjectShareUrl(projectName: string) {
     // Link the user to the project dashboard list and open the share popover immediately.
@@ -38,6 +86,7 @@
 {#if hasUserId && hasProjects}
   <Dropdown.Root bind:open={isDropdownOpen}>
     <Dropdown.Trigger
+      bind:this={dropdownTriggerEl}
       class="w-18 flex flex-row gap-1 items-center rounded-sm {isDropdownOpen
         ? 'bg-slate-200'
         : 'hover:bg-slate-100'} px-2 py-1"
@@ -51,7 +100,7 @@
         <CaretDownIcon size="12px" />
       {/if}
     </Dropdown.Trigger>
-    <Dropdown.Content>
+    <Dropdown.Content bind:this={dropdownContentEl} align={dropdownAlign}>
       {#if isPending}
         Loading...
       {:else if error}
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
index 1bb081bc574..81a487a20bb 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
@@ -4,6 +4,7 @@
     canManageOrgUser,
     invalidateAfterUserDelete,
   } from "@rilldata/web-admin/features/organizations/user-management/utils.ts";
+  import { determineDropdownAlign } from "@rilldata/web-admin/features/organizations/user-management/table/dropdownAlignment.ts";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
@@ -20,6 +21,8 @@
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus.ts";
   import OrgUpgradeGuestConfirmDialog from "@rilldata/web-admin/features/organizations/user-management/dialogs/OrgUpgradeGuestConfirmDialog.svelte";
   import { ORG_ROLES_DESCRIPTION_MAP } from "@rilldata/web-admin/features/organizations/user-management/constants.ts";
+  import { browser } from "$app/environment";
+  import { onDestroy, onMount, tick } from "svelte";
 
   export let email: string;
   export let role: string;
@@ -34,6 +37,9 @@
   let isUpgradeConfirmOpen = false;
   let isRemoveConfirmOpen = false;
   let newRole = "";
+  let dropdownAlign: "start" | "end" = "start";
+  let dropdownTriggerEl: HTMLElement | null = null;
+  let dropdownContentEl: HTMLElement | null = null;
 
   $: organization = $page.params.organization;
   $: isGuest = role === OrgUserRoles.Guest;
@@ -45,6 +51,47 @@
     createAdminServiceSetOrganizationMemberUserRole();
   const removeOrganizationMemberUser =
     createAdminServiceRemoveOrganizationMemberUser();
+  async function updateDropdownAlignment() {
+    if (!browser || !isDropdownOpen || !dropdownTriggerEl) return;
+    await tick();
+
+    const menuWidth =
+      dropdownContentEl?.offsetWidth ??
+      dropdownTriggerEl?.offsetWidth ??
+      200;
+
+    dropdownAlign = determineDropdownAlign({
+      triggerRect: dropdownTriggerEl.getBoundingClientRect(),
+      menuWidth,
+      viewportWidth: window.innerWidth,
+    });
+  }
+
+  function handleWindowResize() {
+    void updateDropdownAlignment();
+  }
+
+  onMount(() => {
+    if (!browser) return;
+    window.addEventListener("resize", handleWindowResize);
+  });
+
+  onDestroy(() => {
+    if (!browser) return;
+    window.removeEventListener("resize", handleWindowResize);
+  });
+
+  $: if (isDropdownOpen) {
+    void updateDropdownAlignment();
+  }
+
+  $: if (isDropdownOpen && dropdownContentEl) {
+    void updateDropdownAlignment();
+  }
+
+  $: if (isDropdownOpen && role) {
+    void updateDropdownAlignment();
+  }
 
   async function handleSetRole(role: string) {
     if (role !== OrgUserRoles.Admin && isBillingContact) {
@@ -145,6 +192,7 @@
 {#if canManageUser}
   <DropdownMenu.Root bind:open={isDropdownOpen}>
     <DropdownMenu.Trigger
+      bind:this={dropdownTriggerEl}
       class="w-18 flex flex-row gap-1 items-center rounded-sm {isDropdownOpen
         ? 'bg-slate-200'
         : 'hover:bg-slate-100'} px-2 py-1"
@@ -156,7 +204,11 @@
         <CaretDownIcon size="12px" />
       {/if}
     </DropdownMenu.Trigger>
-    <DropdownMenu.Content align="start" class="w-[200px]">
+    <DropdownMenu.Content
+      bind:this={dropdownContentEl}
+      align={dropdownAlign}
+      class="w-[200px]"
+    >
       {#if organizationPermissions.manageOrgAdmins}
         <DropdownMenu.Item
           class="font-normal flex flex-col items-start hover:bg-slate-50 {role ===

From 25d708b91ed30c0d630c99da8b15263188d228f9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 23 Dec 2025 02:03:16 +0000
Subject: [PATCH 2/3] Refactor: Simplify menu width calculation in dropdowns

Co-authored-by: eric.okuma <eric.okuma@rilldata.com>
---
 .../organizations/user-management/table/dropdownAlignment.ts  | 3 ++-
 .../user-management/table/users/UserGroupsCell.svelte         | 4 +---
 .../user-management/table/users/UserProjectsCell.svelte       | 4 +---
 .../user-management/table/users/UserRoleCell.svelte           | 4 +---
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts b/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts
index 08c94c976b1..a2d232168bb 100644
--- a/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts
+++ b/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts
@@ -14,7 +14,8 @@ export function determineDropdownAlign({
 }): "start" | "end" {
   if (!triggerRect) return "start";
 
-  const width = typeof menuWidth === "number" ? menuWidth : DEFAULT_MENU_WIDTH_PX;
+  const width =
+    typeof menuWidth === "number" ? menuWidth : DEFAULT_MENU_WIDTH_PX;
   const projectedRightEdge = triggerRect.left + width;
   const safeViewportRight = viewportWidth - margin;
 
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
index f0eafeb23f6..09816140fee 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
@@ -33,9 +33,7 @@
     await tick();
 
     const menuWidth =
-      dropdownContentEl?.offsetWidth ??
-      dropdownTriggerEl?.offsetWidth ??
-      200;
+      dropdownContentEl?.offsetWidth ?? dropdownTriggerEl?.offsetWidth ?? 200;
 
     dropdownAlign = determineDropdownAlign({
       triggerRect: dropdownTriggerEl.getBoundingClientRect(),
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
index 93c923932a7..732aa26b29b 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
@@ -40,9 +40,7 @@
     await tick();
 
     const menuWidth =
-      dropdownContentEl?.offsetWidth ??
-      dropdownTriggerEl?.offsetWidth ??
-      200;
+      dropdownContentEl?.offsetWidth ?? dropdownTriggerEl?.offsetWidth ?? 200;
 
     dropdownAlign = determineDropdownAlign({
       triggerRect: dropdownTriggerEl.getBoundingClientRect(),
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
index 81a487a20bb..b5f98e7b599 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
@@ -56,9 +56,7 @@
     await tick();
 
     const menuWidth =
-      dropdownContentEl?.offsetWidth ??
-      dropdownTriggerEl?.offsetWidth ??
-      200;
+      dropdownContentEl?.offsetWidth ?? dropdownTriggerEl?.offsetWidth ?? 200;
 
     dropdownAlign = determineDropdownAlign({
       triggerRect: dropdownTriggerEl.getBoundingClientRect(),

From ce6e1351faf02be3acc7b53b136314d766f1df7f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 23 Dec 2025 02:11:03 +0000
Subject: [PATCH 3/3] Refactor dropdown alignment to respect scroll container
 boundaries

Co-authored-by: eric.okuma <eric.okuma@rilldata.com>
---
 .../user-management/table/dropdownAlignment.ts         | 10 ++++++++--
 .../user-management/table/users/UserGroupsCell.svelte  |  4 ++++
 .../table/users/UserProjectsCell.svelte                |  4 ++++
 .../user-management/table/users/UserRoleCell.svelte    |  4 ++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts b/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts
index a2d232168bb..a4e544f9e06 100644
--- a/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts
+++ b/web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts
@@ -5,21 +5,27 @@ export function determineDropdownAlign({
   triggerRect,
   menuWidth,
   viewportWidth,
+  boundaryRight,
   margin = DEFAULT_VIEWPORT_MARGIN_PX,
 }: {
   triggerRect: DOMRect | null;
   menuWidth?: number;
   viewportWidth: number;
+  boundaryRight?: number | null;
   margin?: number;
 }): "start" | "end" {
   if (!triggerRect) return "start";
 
   const width =
     typeof menuWidth === "number" ? menuWidth : DEFAULT_MENU_WIDTH_PX;
+  const comparisonRight =
+    typeof boundaryRight === "number"
+      ? Math.min(boundaryRight, viewportWidth)
+      : viewportWidth;
   const projectedRightEdge = triggerRect.left + width;
-  const safeViewportRight = viewportWidth - margin;
+  const safeRightEdge = comparisonRight - margin;
 
-  return projectedRightEdge > safeViewportRight ? "end" : "start";
+  return projectedRightEdge > safeRightEdge ? "end" : "start";
 }
 
 export const DROPDOWN_DEFAULT_MARGIN = DEFAULT_VIEWPORT_MARGIN_PX;
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
index 09816140fee..713baf519f2 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserGroupsCell.svelte
@@ -34,11 +34,15 @@
 
     const menuWidth =
       dropdownContentEl?.offsetWidth ?? dropdownTriggerEl?.offsetWidth ?? 200;
+    const scrollContainerRight =
+      dropdownTriggerEl?.closest(".scroll-container")?.getBoundingClientRect()
+        .right ?? null;
 
     dropdownAlign = determineDropdownAlign({
       triggerRect: dropdownTriggerEl.getBoundingClientRect(),
       menuWidth,
       viewportWidth: window.innerWidth,
+      boundaryRight: scrollContainerRight,
     });
   }
 
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
index 732aa26b29b..4d10c8488b4 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserProjectsCell.svelte
@@ -41,11 +41,15 @@
 
     const menuWidth =
       dropdownContentEl?.offsetWidth ?? dropdownTriggerEl?.offsetWidth ?? 200;
+    const scrollContainerRight =
+      dropdownTriggerEl?.closest(".scroll-container")?.getBoundingClientRect()
+        .right ?? null;
 
     dropdownAlign = determineDropdownAlign({
       triggerRect: dropdownTriggerEl.getBoundingClientRect(),
       menuWidth,
       viewportWidth: window.innerWidth,
+      boundaryRight: scrollContainerRight,
     });
   }
 
diff --git a/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte b/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
index b5f98e7b599..eae703de93a 100644
--- a/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
+++ b/web-admin/src/features/organizations/user-management/table/users/UserRoleCell.svelte
@@ -57,11 +57,15 @@
 
     const menuWidth =
       dropdownContentEl?.offsetWidth ?? dropdownTriggerEl?.offsetWidth ?? 200;
+    const scrollContainerRight =
+      dropdownTriggerEl?.closest(".scroll-container")?.getBoundingClientRect()
+        .right ?? null;
 
     dropdownAlign = determineDropdownAlign({
       triggerRect: dropdownTriggerEl.getBoundingClientRect(),
       menuWidth,
       viewportWidth: window.innerWidth,
+      boundaryRight: scrollContainerRight,
     });
   }