From 1ad57726947b629a3e7bcf6c59864906a100342d Mon Sep 17 00:00:00 2001
From: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Date: Fri, 19 Dec 2025 19:08:02 +0530
Subject: [PATCH] [WEB-5761]fix: intake spacing issue (#8399)

---
 .../inbox/content/issue-properties.tsx        |  3 +-
 .../components/inbox/content/issue-root.tsx   | 40 +++++++++++--------
 .../core/components/inbox/content/root.tsx    |  3 +-
 .../components/issues/attachment/root.tsx     |  5 +--
 .../issue-detail/label/label-list-item.tsx    | 10 ++---
 5 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/apps/web/core/components/inbox/content/issue-properties.tsx b/apps/web/core/components/inbox/content/issue-properties.tsx
index 807d9e235..c9d141977 100644
--- a/apps/web/core/components/inbox/content/issue-properties.tsx
+++ b/apps/web/core/components/inbox/content/issue-properties.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { observer } from "mobx-react";
 import {
   StatePropertyIcon,
@@ -58,7 +57,7 @@ export const InboxIssueContentProperties = observer(function InboxIssueContentPr
   return (
     <div className="flex w-full flex-col divide-y-2 divide-subtle-1">
       <div className="w-full overflow-y-auto">
-        <h5 className="text-13 font-medium my-4">Properties</h5>
+        <h5 className="text-body-sm-medium mb-2">Properties</h5>
         <div className={`divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* Intake State */}
diff --git a/apps/web/core/components/inbox/content/issue-root.tsx b/apps/web/core/components/inbox/content/issue-root.tsx
index c93df6f0f..3c7b3c75d 100644
--- a/apps/web/core/components/inbox/content/issue-root.tsx
+++ b/apps/web/core/components/inbox/content/issue-root.tsx
@@ -166,7 +166,7 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
 
   return (
     <>
-      <div className="rounded-lg space-y-4">
+      <div className="space-y-4 pb-4">
         {duplicateIssues.length > 0 && (
           <DeDupeIssuePopoverRoot
             workspaceSlug={workspaceSlug}
@@ -249,24 +249,30 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
         </div>
       </div>
 
-      <IssueAttachmentRoot
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issueId={issue.id}
-        disabled={!isEditable}
-      />
+      <div className="py-4">
+        <IssueAttachmentRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issue.id}
+          disabled={!isEditable}
+        />
+      </div>
 
-      <InboxIssueContentProperties
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issue={issue}
-        issueOperations={issueOperations}
-        isEditable={isEditable}
-        duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
-        isIntakeAccepted={isIntakeAccepted}
-      />
+      <div className="py-4">
+        <InboxIssueContentProperties
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issue={issue}
+          issueOperations={issueOperations}
+          isEditable={isEditable}
+          duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
+          isIntakeAccepted={isIntakeAccepted}
+        />
+      </div>
 
-      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} isIntakeIssue />
+      <div className="pt-4">
+        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} isIntakeIssue />
+      </div>
     </>
   );
 });
diff --git a/apps/web/core/components/inbox/content/root.tsx b/apps/web/core/components/inbox/content/root.tsx
index d363ca165..f330f6468 100644
--- a/apps/web/core/components/inbox/content/root.tsx
+++ b/apps/web/core/components/inbox/content/root.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -94,7 +93,7 @@ export const InboxContentRoot = observer(function InboxContentRoot(props: TInbox
             embedRemoveCurrentNotification={embedRemoveCurrentNotification}
           />
         </div>
-        <ContentWrapper className="space-y-5 divide-y-2 divide-subtle-1">
+        <ContentWrapper className="divide-y-2 divide-subtle-1">
           <InboxIssueMainContent
             workspaceSlug={workspaceSlug}
             projectId={projectId}
diff --git a/apps/web/core/components/issues/attachment/root.tsx b/apps/web/core/components/issues/attachment/root.tsx
index 8ccaa7ae8..e1060746b 100644
--- a/apps/web/core/components/issues/attachment/root.tsx
+++ b/apps/web/core/components/issues/attachment/root.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
 import { useAttachmentOperations } from "../issue-detail-widgets/attachments/helper";
@@ -20,8 +19,8 @@ export const IssueAttachmentRoot = observer(function IssueAttachmentRoot(props:
   const attachmentHelpers = useAttachmentOperations(workspaceSlug, projectId, issueId);
 
   return (
-    <div className="relative py-3 space-y-3">
-      <h3 className="text-16">Attachments</h3>
+    <div className="relative space-y-3">
+      <h3 className="text-body-sm-medium">Attachments</h3>
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
         <IssueAttachmentUpload
           workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index 77a68153e..0d2bdbc9b 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -31,14 +31,10 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
 
   if (!label) return <></>;
   return (
-    <Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}>
+    <Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}>
       <LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
-      <div className="flex-shrink-0">{label.name}</div>
-      {!disabled && (
-        <div className="flex-shrink-0">
-          <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger" />
-        </div>
-      )}
+      <span className="text-body-xs-regular">{label.name}</span>
+      {!disabled && <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger" />}
     </Button>
   );
 });