From 96f519d5e316e9edc22986a951318ed654d45280 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Tue, 5 Mar 2024 14:19:47 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20mobile=20layout=20?=
 =?UTF-8?q?for=20project=20overview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project/overview/Activity/Activity.tsx    |  2 +-
 .../src/pages/org-slug/projects/Id.tsx        | 21 ++++++++++++++-----
 .../pages/org-slug/projects/id/Overview.tsx   | 12 +++++------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
index 040683b9..252d85a1 100644
--- a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
+++ b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
@@ -11,7 +11,7 @@ export const Activity = ({
   activities: GitCommitWithBranch[];
 }) => {
   return (
-    <div className="col-span-2 mr-1">
+    <div className="col-span-5 md:col-span-2 mr-1">
       <div className="flex items-center justify-between">
         <Heading className="text-lg leading-6 font-medium">Activity</Heading>
         <Button variant="tertiary" size="sm">
diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx
index 8b164852..668b3f8e 100644
--- a/packages/frontend/src/pages/org-slug/projects/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx
@@ -7,6 +7,7 @@ import {
   useParams,
 } from 'react-router-dom';
 import { Project as ProjectType } from 'gql-client';
+import { useMediaQuery } from 'usehooks-ts';
 
 import { useGQLClient } from '../../../context/GQLClientContext';
 import { useOctokit } from '../../../context/OctokitContext';
@@ -23,6 +24,9 @@ const Id = () => {
   const client = useGQLClient();
   const location = useLocation();
 
+  const isDesktopView = useMediaQuery('(min-width: 768px)'); // md:
+  const buttonSize = isDesktopView ? {} : { size: 'sm' as const };
+
   const [project, setProject] = useState<ProjectType | null>(null);
   const [repoUrl, setRepoUrl] = useState('');
 
@@ -65,25 +69,32 @@ const Id = () => {
       {project ? (
         <>
           <div className="px-6 py-4 flex justify-between items-center gap-4">
-            <div className="flex items-center justify-center gap-4">
+            <div className="flex items-center justify-center gap-4 overflow-hidden">
               <Button
                 variant="tertiary"
-                className="rounded-full h-11 w-11 p-0"
+                iconOnly
+                className="rounded-full h-11 w-11 p-0 shrink-0"
                 aria-label="Go back"
                 leftIcon={<ChevronLeft />}
                 onClick={() => navigate(-1)}
               />
-              <Heading className="text-2xl font-medium">
+              <Heading className="text-2xl font-medium truncate">
                 {project?.name}
               </Heading>
             </div>
             <div className="flex items-center justify-center gap-3">
               <Link to={repoUrl} target="_blank">
-                <Button className="h-11 transition-colors" variant="tertiary">
+                <Button
+                  {...buttonSize}
+                  className="h-11 transition-colors"
+                  variant="tertiary"
+                >
                   Open repo
                 </Button>
               </Link>
-              <Button className="h-11 transition-colors">Go to app</Button>
+              <Button {...buttonSize} className="h-11 transition-colors">
+                Go to app
+              </Button>
             </div>
           </div>
           <WavyBorder />
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
index 81cdbe16..c1337045 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@@ -115,8 +115,8 @@ const OverviewTabPanel = () => {
   }, [project]);
 
   return (
-    <div className="grid grid-cols-5 gap-[72px]">
-      <div className="col-span-3">
+    <div className="grid grid-cols-5 gap-6 md:gap-[72px]">
+      <div className="col-span-5 md:col-span-3">
         <div className="flex items-center gap-4 mb-6">
           <Avatar
             size={48}
@@ -124,13 +124,13 @@ const OverviewTabPanel = () => {
             imageSrc={project.icon}
             type="blue"
           />
-          <div className="flex-1 space-y-1">
-            <Heading className="text-lg leading-6 font-medium">
+          <div className="flex-1 space-y-1 overflow-hidden">
+            <Heading className="text-lg leading-6 font-medium truncate">
               {project.name}
             </Heading>
-            <span className="text-sm text-elements-low-em tracking-tight">
+            <p className="text-sm text-elements-low-em tracking-tight truncate">
               {project.subDomain}
-            </span>
+            </p>
           </div>
         </div>
         <OverviewInfo label="Domain" icon={<GlobeIcon />}>