Merge pull request #161 from snowball-tools/ayungavis/T-4936-make-deployed-lines-responsive

[T-4936: style] Make deployed lines responsive

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,27 @@ const DeploymentDetailsCard = ({
     }
   };
 
+  const renderDeploymentStatus = 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 ">
+        <div className={className}>
-      <div className="flex-1 max-w-[30%] space-y-2">
+          <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 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-[90%] sm:max-w-full">
           {/* DEPLOYMENT URL */}
           {deployment.url && (
             <Heading
@@ -80,25 +98,21 @@ const DeploymentDetailsCard = ({
               : '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 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 +120,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,16 +142,15 @@ const DeploymentDetailsCard = ({
                 // imageSrc={deployment.createdBy.avatarUrl}
               ></Avatar>
             </div>
-
             <OverflownText
-            // className="min-w-[200px]"
               content={formatAddress(deployment.createdBy?.name ?? '')}
             >
               {formatAddress(deployment.createdBy.name ?? '')}
             </OverflownText>
           </div>
+        </div>
         <DeploymentMenu
-          className="ml-auto"
+          className="ml-auto md:static absolute top-4 right-0"
           deployment={deployment}
           currentDeployment={currentDeployment}
           onUpdate={onUpdate}

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"

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: [],
         },
       },
     },