User management dropdown alignment

web-admin/src/features/organizations/user-management/table/dropdownAlignment.ts

@@ -0,0 +1,31 @@
+const DEFAULT_VIEWPORT_MARGIN_PX = 16;
+const DEFAULT_MENU_WIDTH_PX = 240;
+
+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 safeRightEdge = comparisonRight - margin;
+
+  return projectedRightEdge > safeRightEdge ? "end" : "start";
+}
+
+export const DROPDOWN_DEFAULT_MARGIN = DEFAULT_VIEWPORT_MARGIN_PX;

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"

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,56 @@
   );
   $: ({ 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;
+    const scrollContainerRight =
+      dropdownTriggerEl?.closest(".scroll-container")?.getBoundingClientRect()
+        .right ?? null;
+
+    dropdownAlign = determineDropdownAlign({
+      triggerRect: dropdownTriggerEl.getBoundingClientRect(),
+      menuWidth,
+      viewportWidth: window.innerWidth,
+      boundaryRight: scrollContainerRight,
+    });
+  }
+
+  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 +90,7 @@
         <CaretDownIcon size="12px" />
       {/if}
     </Dropdown.Trigger>
-    <Dropdown.Content>
+    <Dropdown.Content bind:this={dropdownContentEl} align={dropdownAlign}>
       {#if isPending}
         Loading...
       {:else if error}

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,53 @@
   $: 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;
+    const scrollContainerRight =
+      dropdownTriggerEl?.closest(".scroll-container")?.getBoundingClientRect()
+        .right ?? null;
+
+    dropdownAlign = determineDropdownAlign({
+      triggerRect: dropdownTriggerEl.getBoundingClientRect(),
+      menuWidth,
+      viewportWidth: window.innerWidth,
+      boundaryRight: scrollContainerRight,
+    });
+  }
+
+  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 +88,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 +102,7 @@
         <CaretDownIcon size="12px" />
       {/if}
     </Dropdown.Trigger>
-    <Dropdown.Content>
+    <Dropdown.Content bind:this={dropdownContentEl} align={dropdownAlign}>
       {#if isPending}
         Loading...
       {:else if error}

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,49 @@
     createAdminServiceSetOrganizationMemberUserRole();
   const removeOrganizationMemberUser =
     createAdminServiceRemoveOrganizationMemberUser();
+  async function updateDropdownAlignment() {
+    if (!browser || !isDropdownOpen || !dropdownTriggerEl) return;
+    await tick();
+
+    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,
+    });
+  }
+
+  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 +194,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 +206,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 ===