From 4c30d706717c515585280da0d113dfbdc90935cf Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra <rameshkumar2299@gmail.com>
Date: Mon, 11 Mar 2024 22:03:08 +0530
Subject: [PATCH] dashboard responsive

---
 web/components/core/activity.tsx              | 24 +++++++++----------
 .../widgets/recent-collaborators/root.tsx     |  2 +-
 .../dashboard/widgets/recent-projects.tsx     |  6 ++---
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index 020e88ccc..eb705fa98 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -35,15 +35,16 @@ export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
       {activity?.issue_detail ? (
         <a
           aria-disabled={activity.issue === null}
-          href={`${`/${workspaceSlug ?? activity.workspace_detail?.slug}/projects/${activity.project}/issues/${
-            activity.issue
-          }`}`}
+          href={`${`/${workspaceSlug ?? activity.workspace_detail?.slug}/projects/${activity.project}/issues/${activity.issue
+            }`}`}
           target={activity.issue === null ? "_self" : "_blank"}
           rel={activity.issue === null ? "" : "noopener noreferrer"}
-          className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+          className="border border-red-500 relative w-full overflow-hidden"
         >
-          <span className="whitespace-nowrap">{`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}</span>{" "}
-          <span className="font-normal">{activity.issue_detail?.name}</span>
+          <div className="border border-red-500 overflow-hidden relative inline-flex w-full items-center gap-1 font-medium text-custom-text-100 hover:underline">
+            <div className="whitespace-nowrap break-all">{`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}</div>{" "}
+            <div className="relative whitespace-nowrap break-all overflow-hidden w-full font-normal truncate line-clamp-1">{activity.issue_detail?.name}</div>
+          </div>
         </a>
       ) : (
         <span className="inline-flex items-center gap-1 font-medium text-custom-text-100 whitespace-nowrap">
@@ -60,9 +61,8 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
 
   return (
     <a
-      href={`/${workspaceSlug ?? activity.workspace_detail?.slug}/profile/${
-        activity.new_identifier ?? activity.old_identifier
-      }`}
+      href={`/${workspaceSlug ?? activity.workspace_detail?.slug}/profile/${activity.new_identifier ?? activity.old_identifier
+        }`}
       target="_blank"
       rel="noopener noreferrer"
       className="inline-flex items-center font-medium text-custom-text-100 hover:underline"
@@ -591,7 +591,7 @@ const activityDetails: {
   state: {
     message: (activity, showIssue) => (
       <>
-        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        {/* set the state to <span className="border border-green-500 font-medium text-custom-text-100">{activity.new_value}</span> */}
         {showIssue && (
           <>
             {" "}
@@ -678,12 +678,12 @@ export const ActivityMessage = ({ activity, showIssue = false }: ActivityMessage
   const { workspaceSlug } = router.query;
 
   return (
-    <>
+    <div className="w-full border border-red-500 overflow-hidden">
       {activityDetails[activity.field as keyof typeof activityDetails]?.message(
         activity,
         showIssue,
         workspaceSlug ? workspaceSlug.toString() : activity.workspace_detail?.slug ?? ""
       )}
-    </>
+    </div>
   );
 };
diff --git a/web/components/dashboard/widgets/recent-collaborators/root.tsx b/web/components/dashboard/widgets/recent-collaborators/root.tsx
index d65b15db7..3278c4351 100644
--- a/web/components/dashboard/widgets/recent-collaborators/root.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators/root.tsx
@@ -22,7 +22,7 @@ export const RecentCollaboratorsWidget: React.FC<WidgetProps> = (props) => {
             Top eight active members in your project by last activity
           </p>
         </div>
-        <div className="flex min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400">
+        <div className="flex md:min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400">
           <Search className="h-3.5 w-3.5 text-custom-text-400" />
           <input
             className="w-full border-none bg-transparent text-sm focus:outline-none"
diff --git a/web/components/dashboard/widgets/recent-projects.tsx b/web/components/dashboard/widgets/recent-projects.tsx
index 22e561ac8..bd2c15f81 100644
--- a/web/components/dashboard/widgets/recent-projects.tsx
+++ b/web/components/dashboard/widgets/recent-projects.tsx
@@ -42,10 +42,10 @@ const ProjectListItem: React.FC<ProjectListItemProps> = observer((props) => {
           <ProjectLogo logo={projectDetails.logo_props} className="text-xl" />
         </div>
       </div>
-      <div className="flex-grow truncate">
-        <h6 className="text-sm text-custom-text-300 font-medium group-hover:underline group-hover:text-custom-text-100 truncate">
+      <div className="w-full overflow-hidden">
+        <div className="text-sm text-custom-text-300 group-hover:underline group-hover:text-custom-text-100 overflow-hidden line-clamp-2">
           {projectDetails.name}
-        </h6>
+        </div>
         <div className="mt-2">
           <AvatarGroup>
             {projectDetails.members?.map((member) => (