From e6d626fbc5b545448a6a76a71376b9561c215802 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Wed, 22 May 2024 11:34:15 +0530
Subject: [PATCH] fix list view visual alignments (#4543)

---
 packages/ui/src/drag-handle.tsx                               | 2 +-
 web/components/issues/issue-layouts/list/block-root.tsx       | 2 +-
 web/components/issues/issue-layouts/list/block.tsx            | 4 ++--
 .../issues/issue-layouts/list/headers/group-by-card.tsx       | 2 +-
 .../issues/issue-layouts/list/quick-add-issue-form.tsx        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/drag-handle.tsx b/packages/ui/src/drag-handle.tsx
index d04f7929f..0496f86de 100644
--- a/packages/ui/src/drag-handle.tsx
+++ b/packages/ui/src/drag-handle.tsx
@@ -17,7 +17,7 @@ export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((pro
   return (
     <button
       type="button"
-      className={`mr-1 p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
+      className={` p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
         isDragging ? "opacity-100" : "opacity-0"
       }`}
       onContextMenu={(e) => {
diff --git a/web/components/issues/issue-layouts/list/block-root.tsx b/web/components/issues/issue-layouts/list/block-root.tsx
index 3832ab7a6..39d748f84 100644
--- a/web/components/issues/issue-layouts/list/block-root.tsx
+++ b/web/components/issues/issue-layouts/list/block-root.tsx
@@ -118,7 +118,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
         key={`${issueId}`}
         defaultHeight="3rem"
         root={containerRef}
-        classNames={`relative ${isLastChild ? "" : "border-b border-b-custom-border-200"}`}
+        classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-custom-border-200"}`}
       >
         <IssueBlock
           issueId={issueId}
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index df09a0762..3cf82cd31 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -119,7 +119,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
     <div
       ref={issueRef}
       className={cn(
-        "group min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
+        "group min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 pl-1.5 pr-1 text-sm",
         {
           "border border-custom-primary-70 hover:border-custom-primary-70":
             getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
@@ -145,7 +145,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
               </div>
             </div>
             {displayProperties && displayProperties?.key && (
-              <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+              <div className="pl-1 flex-shrink-0 text-xs font-medium text-custom-text-300">
                 {projectIdentifier}-{issue.sequence_id}
               </div>
             )}
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index e6883a100..d479bbeaa 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -65,7 +65,7 @@ export const HeaderGroupByCard = observer(
 
     return (
       <>
-        <div className="relative flex w-full flex-shrink-0 flex-row items-center gap-2 py-1.5">
+        <div className="relative flex w-full flex-shrink-0 flex-row items-center gap-1.5 py-1.5">
           <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
             {icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
           </div>
diff --git a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
index 419c3bc0e..8123b4ee6 100644
--- a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
@@ -152,7 +152,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
         </div>
       ) : (
         <div
-          className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
+          className="flex w-full cursor-pointer items-center gap-3 p-6 py-3 text-custom-primary-100"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-3.5 w-3.5 stroke-2" />