From 6d861c71cc1a10781e8eff93196d18147ff6be7a Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Fri, 8 Mar 2024 09:57:50 +0700
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20filter=20f?=
 =?UTF-8?q?orm=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/projects/project/deployments/FilterForm.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
index 3668b7ac..348ecaf0 100644
--- a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
@@ -75,7 +75,7 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
   };
 
   return (
-    <div className="xl:grid xl:grid-cols-8 flex flex-col xl:gap-3 gap-0">
+    <div className="xl:grid xl:grid-cols-8 flex flex-col xl:gap-3 gap-3">
       <div className="col-span-4 flex items-center">
         <Input
           placeholder="Search branches"

From c6ea3a8f53a44988f6786e228dce1046a7dc65e6 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Fri, 8 Mar 2024 09:58:26 +0700
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20responsive?=
 =?UTF-8?q?=20for=20deployment=20details=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deployments/DeploymentDetailsCard.tsx     | 175 ++++++++++--------
 1 file changed, 102 insertions(+), 73 deletions(-)

diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
index c4940bac..3c964344 100644
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/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,85 +60,114 @@ const DeploymentDetailsCard = ({
     }
   };
 
-  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 ">
-      <div className="flex-1 max-w-[30%] space-y-2">
-        {/* DEPLOYMENT URL */}
-        {deployment.url && (
-          <Heading
-            className="text-sm font-medium text-elements-high-em tracking-tight"
-            as="h2"
-          >
-            <OverflownText content={deployment.url}>
-              {deployment.url}
-            </OverflownText>
-          </Heading>
-        )}
-        <span className="text-sm text-elements-low-em tracking-tight">
-          {deployment.environment === Environment.Production
-            ? `Production ${deployment.isCurrent ? '(Current)' : ''}`
-            : 'Preview'}
-        </span>
-      </div>
-
-      {/* DEPLOYMENT STATUS */}
-      <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 COMMIT DETAILS */}
-      <div className="text-sm w-[25%] space-y-2 text-elements-low-em">
-        <span className="flex gap-1.5 items-center">
-          <BranchStrokeIcon className="h-4 w-4" />
-          {deployment.branch}
-        </span>
-        <span className="flex gap-2 items-center">
-          <CommitIcon />
-          <OverflownText content={deployment.commitMessage}>
-            {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
-            {deployment.commitMessage}
-          </OverflownText>
-        </span>
-      </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="flex w-[70%] items-center gap-0.5 2xl:gap-2 flex-1">
-          <ClockOutlineIcon className="h-4 w-4" />
-          <OverflownText content={relativeTimeMs(deployment.createdAt) ?? ''}>
-            {relativeTimeMs(deployment.createdAt)}
-          </OverflownText>
-          <div>
-            <Avatar
-              type="orange"
-              initials={getInitials(deployment.createdBy.name ?? '')}
-              className="lg:size-5 2xl:size-6"
-              // TODO: Add avatarUrl
-              // imageSrc={deployment.createdBy.avatarUrl}
-            ></Avatar>
-          </div>
-
-          <OverflownText
-            // className="min-w-[200px]"
-            content={formatAddress(deployment.createdBy?.name ?? '')}
-          >
-            {formatAddress(deployment.createdBy.name ?? '')}
-          </OverflownText>
-        </div>
+  const renderDeploymentMenu = useCallback(
+    (className?: string) => {
+      return (
         <DeploymentMenu
-          className="ml-auto"
+          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
+              className="text-sm font-medium text-elements-high-em tracking-tight"
+              as="h2"
+            >
+              <OverflownText content={deployment.url}>
+                {deployment.url}
+              </OverflownText>
+            </Heading>
+          )}
+          <span className="text-sm text-elements-low-em tracking-tight">
+            {deployment.environment === Environment.Production
+              ? `Production ${deployment.isCurrent ? '(Current)' : ''}`
+              : 'Preview'}
+          </span>
+        </div>
+        {/* MENU ON MOBILE */}
+        {renderDeploymentMenu('flex md:hidden ml-auto')}
+      </div>
+
+      {/* DEPLOYMENT STATUS */}
+      {renderDeploymentStatus('w-[10%] max-w-[110px] hidden md:flex h-fit')}
+
+      {/* DEPLOYMENT COMMIT DETAILS */}
+      <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 w-full gap-2 items-center">
+            <CommitIcon />
+            <OverflownText content={deployment.commitMessage}>
+              {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
+              {deployment.commitMessage}
+            </OverflownText>
+          </span>
+        </div>
+        {renderDeploymentStatus('flex md:hidden h-fit')}
+      </div>
+
+      {/* DEPLOYMENT INFOs */}
+      <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 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"
+                initials={getInitials(deployment.createdBy.name ?? '')}
+                className="lg:size-5 2xl:size-6"
+                // TODO: Add avatarUrl
+                // imageSrc={deployment.createdBy.avatarUrl}
+              ></Avatar>
+            </div>
+            <OverflownText
+              content={formatAddress(deployment.createdBy?.name ?? '')}
+            >
+              {formatAddress(deployment.createdBy.name ?? '')}
+            </OverflownText>
+          </div>
+        </div>
+        {renderDeploymentMenu('ml-auto hidden md:flex')}
       </div>
     </div>
   );

From 65b66fe3831234339baaf360cb50793931aebd3e Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Fri, 8 Mar 2024 10:35:22 +0700
Subject: [PATCH 3/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20remove=20e?=
 =?UTF-8?q?mpty=20space?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/project/deployments/DeploymentDetailsCard.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
index 3c964344..8caf9ad1 100644
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@@ -95,7 +95,7 @@ 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-1 flex justify-between w-full  md:max-w-[25%] lg:max-w-[28%]">
+      <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 && (

From de197759deaed43a4257f7d2f48cc1acc47dde9d Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Fri, 8 Mar 2024 10:36:14 +0700
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=8E=A8=20style:=20remove=20width=20an?=
 =?UTF-8?q?d=20height=20icon=20style=20from=20tag=20size?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/shared/Tag/Tag.theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/shared/Tag/Tag.theme.ts b/packages/frontend/src/components/shared/Tag/Tag.theme.ts
index 884f79bc..1aec8467 100644
--- a/packages/frontend/src/components/shared/Tag/Tag.theme.ts
+++ b/packages/frontend/src/components/shared/Tag/Tag.theme.ts
@@ -36,11 +36,11 @@ export const tagTheme = tv(
       size: {
         sm: {
           wrapper: ['px-2', 'py-2'],
-          icon: ['h-4', 'w-4'],
+          icon: [],
         },
         xs: {
           wrapper: ['px-2', 'py-1'],
-          icon: ['h-3', 'w-3'],
+          icon: [],
         },
       },
     },

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 5/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20remove=20d?=
 =?UTF-8?q?uplicate=20component=20and=20use=20absolute=20for=20the=20mobil?=
 =?UTF-8?q?e=20version?=
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>
   );