From 519618b4568d72ac4906b9e67a9b1ed2cc6726c1 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Fri, 8 Mar 2024 12:42:42 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20remove=20dupli?=
 =?UTF-8?q?cate=20component=20and=20use=20absolute=20for=20the=20mobile=20?=
 =?UTF-8?q?version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deployments/DeploymentDetailsCard.tsx     | 31 ++++++-------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
index 8caf9ad1..09bfe11c 100644
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@@ -60,22 +60,6 @@ const DeploymentDetailsCard = ({
     }
   };
 
-  const renderDeploymentMenu = useCallback(
-    (className?: string) => {
-      return (
-        <DeploymentMenu
-          className={className}
-          deployment={deployment}
-          currentDeployment={currentDeployment}
-          onUpdate={onUpdate}
-          project={project}
-          prodBranchDomains={prodBranchDomains}
-        />
-      );
-    },
-    [deployment, currentDeployment, onUpdate, project, prodBranchDomains],
-  );
-
   const renderDeploymentStatus = useCallback(
     (className?: string) => {
       return (
@@ -94,9 +78,9 @@ const DeploymentDetailsCard = ({
   );
 
   return (
-    <div className="flex md:flex-row flex-col gap-6 py-4 px-3 pb-6 mb-2 last:mb-0 last:pb-4 border-b border-border-separator last:border-b-transparent">
+    <div className="flex md:flex-row flex-col gap-6 py-4 px-3 pb-6 mb-2 last:mb-0 last:pb-4 border-b border-border-separator last:border-b-transparent relative">
       <div className="flex-1 flex justify-between w-full md:max-w-[25%] lg:max-w-[28%]">
-        <div className="flex-1 w-full space-y-2 max-w-[80%] sm:max-w-full">
+        <div className="flex-1 w-full space-y-2 max-w-[90%] sm:max-w-full">
           {/* DEPLOYMENT URL */}
           {deployment.url && (
             <Heading
@@ -114,8 +98,6 @@ const DeploymentDetailsCard = ({
               : 'Preview'}
           </span>
         </div>
-        {/* MENU ON MOBILE */}
-        {renderDeploymentMenu('flex md:hidden ml-auto')}
       </div>
 
       {/* DEPLOYMENT STATUS */}
@@ -167,7 +149,14 @@ const DeploymentDetailsCard = ({
             </OverflownText>
           </div>
         </div>
-        {renderDeploymentMenu('ml-auto hidden md:flex')}
+        <DeploymentMenu
+          className="ml-auto md:static absolute top-4 right-0"
+          deployment={deployment}
+          currentDeployment={currentDeployment}
+          onUpdate={onUpdate}
+          project={project}
+          prodBranchDomains={prodBranchDomains}
+        />
       </div>
     </div>
   );