fix: prevent member dropdown from being cutoff

apps/web/src/views/board/components/UpdateBoardSlugForm.tsx

@@ -167,8 +167,7 @@ export function UpdateBoardSlugForm({
               !isDirty ||
               updateBoardSlug.isPending ||
               errors.slug?.message !== undefined ||
-              isBoardSlugAvailable?.isReserved ||
+              isBoardSlugAvailable?.isReserved
-              checkBoardSlugAvailability.isLoading
             }
           >
             {t`Update`}

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="-mx-4 -my-2 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="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

packages/api/src/routers/board.ts

@@ -276,21 +276,6 @@ export const boardRouter = createTRPCRouter({
 
       await assertUserInWorkspace(ctx.db, userId, board.workspaceId);
 
-      if (input.slug) {
-        const isBoardSlugAvailable = await boardRepo.isBoardSlugAvailable(
-          ctx.db,
-          input.slug,
-          board.workspaceId,
-        );
-
-        if (!isBoardSlugAvailable) {
-          throw new TRPCError({
-            message: `Board slug ${input.slug} is not available`,
-            code: "BAD_REQUEST",
-          });
-        }
-      }
-
       const result = await boardRepo.update(ctx.db, {
         name: input.name,
         slug: input.slug,
@@ -422,23 +407,11 @@ export const boardRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      const board = await boardRepo.getWorkspaceAndBoardIdByBoardPublicId(
-        ctx.db,
-        input.boardPublicId,
-      );
-
-      if (!board)
-        throw new TRPCError({
-          message: `Board with public ID ${input.boardPublicId} not found`,
-          code: "NOT_FOUND",
-        });
-
       const isBoardSlugAvailable = await boardRepo.isBoardSlugAvailable(
         ctx.db,
         input.boardSlug,
-        board.workspaceId,
+        input.boardPublicId,
       );
-
       return {
         isReserved: !isBoardSlugAvailable,
       };

packages/db/src/repository/board.repo.ts

@@ -1,4 +1,4 @@
-import { and, asc, desc, eq, inArray, isNull, or } from "drizzle-orm";
+import { and, asc, desc, eq, exists, inArray, isNull, or, sql } from "drizzle-orm";
 
 import type { dbClient } from "@kan/db/client";
 import type { BoardVisibilityStatus } from "@kan/db/schema";
@@ -481,18 +481,30 @@ export const getWorkspaceAndBoardIdByBoardPublicId = async (
 export const isBoardSlugAvailable = async (
   db: dbClient,
   boardSlug: string,
-  workspaceId: number,
+  boardPublicId: string,
 ) => {
-  const result = await db.query.boards.findFirst({
+  const result = await db
-    columns: {
+    .select({ id: boards.id })
-      id: true,
+    .from(boards)
-    },
+    .where(
-    where: and(
+      and(
-      eq(boards.slug, boardSlug),
+        eq(boards.publicId, boardPublicId),
-      eq(boards.workspaceId, workspaceId),
+        exists(
-      isNull(boards.deletedAt),
+          db
-    ),
+            .select({ id: boards.id })
-  });
+            .from(boards)
+            .where(
+              and(
+                eq(boards.slug, boardSlug),
+                eq(boards.workspaceId, sql`${boards.workspaceId}`), // Reference outer query's workspaceId
+                isNull(boards.deletedAt),
+              ),
+            )
+            .limit(1),
+        ),
+      ),
+    )
+    .limit(1);
 
-  return result === undefined;
+  return result.length === 0;
 };