From 0cefd1748489412635ee7c7f969913698865c6f0 Mon Sep 17 00:00:00 2001
From: Henry <30578846+hjball@users.noreply.github.com>
Date: Sat, 26 Jul 2025 21:34:05 +0100
Subject: [PATCH] fix: prevent member dropdown from being cutoff (#127)

---
 apps/web/src/views/members/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/views/members/index.tsx b/apps/web/src/views/members/index.tsx
index 4f49bada..1a621d2e 100644
--- a/apps/web/src/views/members/index.tsx
+++ b/apps/web/src/views/members/index.tsx
@@ -97,7 +97,7 @@ export default function MembersPage() {
         </td>
         <td
           className={twMerge(
-            "w-auto min-w-[120px] sm:w-[35%] sm:min-w-[150px]",
+            "w-auto min-w-[120px] overflow-visible sm:w-[35%] sm:min-w-[150px]",
             isLastRow && "rounded-br-lg",
           )}
         >
@@ -121,7 +121,7 @@ export default function MembersPage() {
             </div>
             <div
               className={twMerge(
-                "relative",
+                "relative z-50",
                 (workspace.role !== "admin" || showSkeleton) && "hidden",
               )}
             >
@@ -172,10 +172,10 @@ export default function MembersPage() {
         </div>
 
         <div className="mt-8 flow-root">
-          <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-            <div className="inline-block min-w-full px-4 py-2 align-middle sm:px-6 lg:px-8">
+          <div className="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+            <div className="inline-block min-w-full overflow-x-auto px-4 py-2 pb-16 align-middle sm:px-6 lg:px-8">
               <div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
-                <table className="min-w-full divide-y divide-light-600 dark:divide-dark-600">
+                <table className="min-w-full divide-y divide-light-600 overflow-visible dark:divide-dark-600">
                   <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
                     <tr>
                       <th
@@ -192,7 +192,7 @@ export default function MembersPage() {
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
+                  <tbody className="divide-y divide-light-600 overflow-visible bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
                     {!isLoading &&
                       data?.members.map((member, index) => (
                         <TableRow