[WEB-716] style: list view issues responsiveness (#3938)

makeplane · Mar 12, 2024 · 73c9165 · 73c9165
1 parent 578bd29
commit 73c9165
Showing 1 changed file with 44 additions and 35 deletions.
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
@@ -44,53 +44,62 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
 
   return (
     <div
-      className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
-        "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
-        "last:border-b-transparent": peekIssue?.issueId !== issue.id,
-      })}
-    >
-      {displayProperties && displayProperties?.key && (
-        <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
-          {projectIdentifier}-{issue.sequence_id}
-        </div>
+      className={cn(
+        "min-h-12 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
+        {
+          "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
+          "last:border-b-transparent": peekIssue?.issueId !== issue.id,
+        }
       )}
+    >
+      <div className="flex">
+        <div className="flex flex-grow items-center gap-3">
+          {displayProperties && displayProperties?.key && (
+            <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+              {projectIdentifier}-{issue.sequence_id}
+            </div>
+          )}
 
-      {issue?.tempId !== undefined && (
-        <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-      )}
+          {issue?.tempId !== undefined && (
+            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+          )}
 
-      {issue?.is_draft ? (
-        <Tooltip tooltipContent={issue.name}>
-          <span>{issue.name}</span>
-        </Tooltip>
-      ) : (
-        <ControlLink
-          href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
-            issue.id
-          }`}
-          target="_blank"
-          onClick={() => handleIssuePeekOverview(issue)}
-          className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-          disabled={!!issue?.tempId}
-        >
-          <Tooltip tooltipContent={issue.name}>
-            <span>{issue.name}</span>
-          </Tooltip>
-        </ControlLink>
-      )}
-
-      <div className="ml-auto flex flex-shrink-0 items-center gap-2">
+          {issue?.is_draft ? (
+            <Tooltip tooltipContent={issue.name}>
+              <span>{issue.name}</span>
+            </Tooltip>
+          ) : (
+            <ControlLink
+              href={`/${workspaceSlug}/projects/${issue.project_id}/${
+                issue.archived_at ? "archived-issues" : "issues"
+              }/${issue.id}`}
+              target="_blank"
+              onClick={() => handleIssuePeekOverview(issue)}
+              className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+              disabled={!!issue?.tempId}
+            >
+              <Tooltip tooltipContent={issue.name}>
+                <span>{issue.name}</span>
+              </Tooltip>
+            </ControlLink>
+          )}
+        </div>
+        {!issue?.tempId && (
+          <div className="block md:hidden border border-custom-border-300 rounded ">{quickActions(issue)}</div>
+        )}
+      </div>
+      <div className="ml-0 md:ml-auto flex flex-wrap  md:flex-shrink-0 items-center gap-2">
         {!issue?.tempId ? (
           <>
             <IssueProperties
-              className="relative flex items-center gap-2 whitespace-nowrap"
+              className="relative flex flex-wrap md:flex-grow md:flex-shrink-0 items-center gap-2 whitespace-nowrap"
               issue={issue}
               isReadOnly={!canEditIssueProperties}
               updateIssue={updateIssue}
               displayProperties={displayProperties}
               activeLayout="List"
             />
-            {quickActions(issue)}
+            <div className="hidden md:block">{quickActions(issue)}</div>
           </>
         ) : (
           <div className="h-4 w-4">