Merge pull request #155 from snowball-tools/andrehadianto/T-4940-project-overview-mobile-layout

[T-4940] project overview mobile layout

packages/frontend/package.json

@@ -49,7 +49,7 @@
     "siwe": "^2.1.4",
     "tailwind-variants": "^0.2.0",
     "typescript": "^4.9.5",
-    "usehooks-ts": "^2.10.0",
+    "usehooks-ts": "^2.15.1",
     "vertical-stepper-nav": "^1.0.2",
     "viem": "^2.7.11",
     "wagmi": "^2.5.7",

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">

packages/frontend/src/components/shared/Avatar/Avatar.theme.ts

@@ -2,7 +2,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
 
 export const avatarTheme = tv(
   {
-    base: ['relative', 'block', 'rounded-full', 'overflow-hidden'],
+    base: ['relative', 'block', 'rounded-full', 'overflow-hidden', 'shrink-0'],
     slots: {
       image: [
         'h-full',

packages/frontend/src/components/shared/Tabs/Tabs.theme.ts

@@ -71,6 +71,7 @@ export const tabsTheme = tv({
       'gap-5',
       'border-b',
       'border-transparent',
+      'overflow-scroll',
       // Horizontal – default
       'data-[orientation=horizontal]:border-border-interactive/10',
       // Vertical

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 />
@@ -96,9 +107,6 @@ const Id = () => {
                 <Tabs.Trigger value="deployments">
                   <Link to="deployments">Deployments</Link>
                 </Tabs.Trigger>
-                <Tabs.Trigger value="database">
-                  <Link to="database">Database</Link>
-                </Tabs.Trigger>
                 <Tabs.Trigger value="integrations">
                   <Link to="integrations">Integrations</Link>
                 </Tabs.Trigger>

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 />}>