🎨 style: adjust responsive for deployment details card

packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   Deployment,
   DeploymentStatus,
@@ -60,9 +60,43 @@ const DeploymentDetailsCard = ({
     }
   };
 
+  const renderDeploymentMenu = useCallback(
+    (className?: string) => {
       return (
-    <div className="flex lg:flex gap-2 lg:gap-2 2xl: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 ">
+        <DeploymentMenu
-      <div className="flex-1 max-w-[30%] space-y-2">
+          className={className}
+          deployment={deployment}
+          currentDeployment={currentDeployment}
+          onUpdate={onUpdate}
+          project={project}
+          prodBranchDomains={prodBranchDomains}
+        />
+      );
+    },
+    [deployment, currentDeployment, onUpdate, project, prodBranchDomains],
+  );
+
+  const renderDeploymentStatus = useCallback(
+    (className?: string) => {
+      return (
+        <div className={className}>
+          <Tag
+            leftIcon={getIconByDeploymentStatus(deployment.status)}
+            size="xs"
+            type={STATUS_COLORS[deployment.status] ?? 'neutral'}
+          >
+            {deployment.status}
+          </Tag>
+        </div>
+      );
+    },
+    [deployment.status, deployment.commitHash],
+  );
+
+  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-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">
           {/* DEPLOYMENT URL */}
           {deployment.url && (
             <Heading
@@ -80,25 +114,23 @@ const DeploymentDetailsCard = ({
               : 'Preview'}
           </span>
         </div>
-
+        {/* MENU ON MOBILE */}
-      {/* DEPLOYMENT STATUS */}
+        {renderDeploymentMenu('flex md:hidden ml-auto')}
-      <div className="w-[10%] max-w-[110px]">
-        <Tag
-          leftIcon={getIconByDeploymentStatus(deployment.status)}
-          size="xs"
-          type={STATUS_COLORS[deployment.status] ?? 'neutral'}
-        >
-          {deployment.status}
-        </Tag>
       </div>
 
+      {/* DEPLOYMENT STATUS */}
+      {renderDeploymentStatus('w-[10%] max-w-[110px] hidden md:flex h-fit')}
+
       {/* DEPLOYMENT COMMIT DETAILS */}
-      <div className="text-sm w-[25%] space-y-2 text-elements-low-em">
+      <div className="flex w-full justify-between md:w-[25%]">
+        <div className="text-sm max-w-[60%] md:max-w-full space-y-2 w-full text-elements-low-em">
           <span className="flex gap-1.5 items-center">
             <BranchStrokeIcon className="h-4 w-4" />
+            <OverflownText content={deployment.branch}>
               {deployment.branch}
+            </OverflownText>
           </span>
-        <span className="flex gap-2 items-center">
+          <span className="flex w-full gap-2 items-center">
             <CommitIcon />
             <OverflownText content={deployment.commitMessage}>
               {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
@@ -106,14 +138,19 @@ const DeploymentDetailsCard = ({
             </OverflownText>
           </span>
         </div>
+        {renderDeploymentStatus('flex md:hidden h-fit')}
+      </div>
 
       {/* DEPLOYMENT INFOs */}
-      <div className="ml-auto max-w-[312px] w-[30%] gap-1 2xl:gap-5 flex items-center justify-between  text-elements-low-em text-sm">
+      <div className="md:ml-auto w-full md:max-w-[312px] md:w-[30%] gap-1 2xl:gap-5 flex items-center justify-between text-elements-low-em text-sm">
-        <div className="flex w-[70%] items-center gap-0.5 2xl:gap-2 flex-1">
+        <div className="flex md:w-[70%] xl:items-center gap-2 flex-1 xl:flex-row md:flex-col">
+          <div className="flex gap-2 items-center">
             <ClockOutlineIcon className="h-4 w-4" />
             <OverflownText content={relativeTimeMs(deployment.createdAt) ?? ''}>
               {relativeTimeMs(deployment.createdAt)}
             </OverflownText>
+          </div>
+          <div className="flex gap-2 items-center">
             <div>
               <Avatar
                 type="orange"
@@ -123,22 +160,14 @@ const DeploymentDetailsCard = ({
                 // imageSrc={deployment.createdBy.avatarUrl}
               ></Avatar>
             </div>
-
             <OverflownText
-            // className="min-w-[200px]"
               content={formatAddress(deployment.createdBy?.name ?? '')}
             >
               {formatAddress(deployment.createdBy.name ?? '')}
             </OverflownText>
           </div>
-        <DeploymentMenu
+        </div>
-          className="ml-auto"
+        {renderDeploymentMenu('ml-auto hidden md:flex')}
-          deployment={deployment}
-          currentDeployment={currentDeployment}
-          onUpdate={onUpdate}
-          project={project}
-          prodBranchDomains={prodBranchDomains}
-        />
       </div>
     </div>
   );