From 8e611664a8ccfa1525d1265c2a55f714a6e2cfce Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Tue, 25 Apr 2023 18:35:58 +0530
Subject: [PATCH] style: made issue list view responsive

---
 .../core/list-view/single-issue.tsx           | 36 ++++++++++---------
 apps/app/layouts/app-layout/app-header.tsx    |  4 +--
 .../projects/[projectId]/issues/index.tsx     |  9 +++--
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 71ccc9db4..67978fe92 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -216,7 +216,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex items-center justify-between gap-2 border-b border-brand-base bg-brand-base px-4 py-2.5 last:border-b-0"
+        className="flex items-center justify-between gap-2 border-b border-brand-base bg-brand-base last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -224,26 +224,28 @@ export const SingleListIssue: React.FC<Props> = ({
         }}
       >
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-          <a className="group relative flex items-center gap-2">
-            {properties.key && (
-              <Tooltip
-                tooltipHeading="Issue ID"
-                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-              >
-                <span className="flex-shrink-0 text-xs text-brand-secondary">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
+          <div className="flex-grow cursor-pointer px-4 py-2.5">
+            <a className="group relative flex items-center gap-2">
+              {properties.key && (
+                <Tooltip
+                  tooltipHeading="Issue ID"
+                  tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+                >
+                  <span className="flex-shrink-0 text-xs text-brand-secondary">
+                    {issue.project_detail?.identifier}-{issue.sequence_id}
+                  </span>
+                </Tooltip>
+              )}
+              <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+                <span className="text-[0.825rem] text-brand-base">
+                  {truncateText(issue.name, 50)}
                 </span>
               </Tooltip>
-            )}
-            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-[0.825rem] text-brand-base">
-                {truncateText(issue.name, 50)}
-              </span>
-            </Tooltip>
-          </a>
+            </a>
+          </div>
         </Link>
 
-        <div className="flex flex-wrap items-center gap-2 text-xs">
+        <div className="flex flex-shrink flex-wrap items-center justify-end gap-2 py-2.5 pr-4 text-xs">
           {properties.priority && (
             <ViewPrioritySelect
               issue={issue}
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index e915ae4d6..979cbd8cc 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -9,8 +9,8 @@ type Props = {
 };
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
-  <div className="flex w-full flex-row items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4">
-    <div className="flex items-center gap-2">
+  <div className="flex w-full flex-row flex-wrap items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4">
+    <div className="flex flex-wrap items-center gap-2">
       <div className="block md:hidden">
         <button
           type="button"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 9a763cfc3..fb5ffbc6b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -8,6 +8,8 @@ import projectService from "services/project.service";
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
+// helper
+import { truncateText } from "helpers/string.helper";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
@@ -21,7 +23,6 @@ import type { NextPage } from "next";
 import { PROJECT_DETAILS } from "constants/fetch-keys";
 
 const ProjectIssues: NextPage = () => {
-
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -38,7 +39,9 @@ const ProjectIssues: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Issues`} />
+            <BreadcrumbItem
+              title={`${truncateText(projectDetails?.name ?? "Project", 12)} Issues`}
+            />
           </Breadcrumbs>
         }
         right={
@@ -51,7 +54,7 @@ const ProjectIssues: NextPage = () => {
                 document.dispatchEvent(e);
               }}
             >
-              <PlusIcon className="w-4 h-4" />
+              <PlusIcon className="h-4 w-4" />
               Add Issue
             </PrimaryButton>
           </div>