From 9212b1ca2ee9acc6d33a52e4bac17d60912a86d2 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 25 May 2026 21:59:55 +0100
Subject: [PATCH] fix: adjust layout of card prefix on public modal

---
 apps/web/src/views/public/board/CardModal.tsx | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/views/public/board/CardModal.tsx b/apps/web/src/views/public/board/CardModal.tsx
index 6fab4ba7..71f84038 100644
--- a/apps/web/src/views/public/board/CardModal.tsx
+++ b/apps/web/src/views/public/board/CardModal.tsx
@@ -95,8 +95,28 @@ export function CardModal({
       <div className="flex h-full w-full flex-col overflow-hidden">
         <div className="h-full p-8">
           <div className="mb-6">
-            <div className="flex w-full items-center justify-between">
-              <div className="absolute right-[2rem] top-[2rem] flex items-center gap-1">
+            <div className="flex w-full items-start justify-between gap-4">
+              <div className="flex-1">
+                {isLoading ? (
+                  <div className="flex space-x-2">
+                    <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+                  </div>
+                ) : (
+                  <>
+                    {data?.cardNumber != null &&
+                      data.list.board.workspace.cardPrefix && (
+                        <span className="mb-1 block text-xs font-medium text-light-700 dark:text-dark-800">
+                          {data.list.board.workspace.cardPrefix}-
+                          {data.cardNumber}
+                        </span>
+                      )}
+                    <h1 className="font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+                      {data?.title}
+                    </h1>
+                  </>
+                )}
+              </div>
+              <div className="flex flex-shrink-0 items-center gap-1">
                 <button
                   type="button"
                   onClick={handleCopyCardLink}
@@ -134,22 +154,6 @@ export function CardModal({
                   />
                 </button>
               </div>
-              {isLoading ? (
-                <div className="flex space-x-2">
-                  <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
-                </div>
-              ) : (
-                <>
-                  {data?.cardNumber != null && data.list.board.workspace.cardPrefix && (
-                    <span className="mb-1 block text-xs font-medium text-light-700 dark:text-dark-800">
-                      {data.list.board.workspace.cardPrefix}-{data.cardNumber}
-                    </span>
-                  )}
-                  <h1 className="pr-8 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-                    {data?.title}
-                  </h1>
-                </>
-              )}
             </div>
             {labels.length > 0 && (
               <div className="mt-2">