UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: выравнивание верхних блоков и зазоров внешних контуров

plane-src/apps/web/ce/components/projects/external-contours/content-root.tsx

@@ -78,7 +78,7 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
   if (!contourRequest || !issue) return <></>;
 
   return (
-    <div className="relative flex h-full w-full flex-col overflow-hidden">
+    <div className="relative flex h-full w-full flex-col overflow-hidden pt-6">
       <div className="z-[11] min-h-[52px] flex-shrink-0">
         <ExternalContoursIssueActionsHeader
           setIsMobileSidebar={setIsMobileSidebar}
@@ -90,7 +90,7 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
           hasDirectTargetAccess={hasDirectTargetAccess}
         />
       </div>
-      <ContentWrapper className="space-y-4 px-4 py-4">
+      <ContentWrapper className="space-y-4 px-4 pb-4 pt-4">
         <ExternalContoursIssueMainContent
           workspaceSlug={workspaceSlug}
           sourceProjectId={projectId}

plane-src/apps/web/ce/components/projects/external-contours/header.tsx

@@ -34,8 +34,8 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
   );
 
   return (
-    <Header>
+    <Header className="pt-4">
-      <Header.LeftItem>
+      <Header.LeftItem className="items-center pt-2">
         <div className="flex flex-grow items-center gap-4">
           <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
@@ -60,7 +60,7 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
           )}
         </div>
       </Header.LeftItem>
-      <Header.RightItem>
+      <Header.RightItem className="pt-2">
         {workspaceSlug && projectId && isAuthorized ? (
           <div className="flex items-center gap-2">
             <ExternalContourCreateModalRoot
@@ -73,7 +73,7 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
               variant="primary"
               size="lg"
               onClick={() => setCreateIssueModal(true)}
-              className="nodedc-external-primary-button min-w-[13rem]"
+              className="nodedc-external-primary-button min-w-[14rem]"
             >
               {t("external_contours_page.header.add_request")}
             </Button>

plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx

@@ -33,6 +33,7 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
   const { isMobile } = usePlatformOS();
   const request = getRequestById(requestId);
   const issue = request?.issue;
+  const isActive = selectedInboxIssueId === requestId;
 
   const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
     if (selectedInboxIssueId === currentIssueId) event.preventDefault();
@@ -52,14 +53,15 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
     <Link
       id={`external-contour-list-item-${request.id}`}
       key={`${projectId}_${request.id}`}
+      className="block"
       href={`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`}
       onClick={(e) => handleIssueRedirection(e, request.id)}
     >
       <div
-        data-active={selectedInboxIssueId === request.id}
+        data-active={isActive}
         className={cn(
           "nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-6 py-5 transition-all hover:bg-white/5",
-          { "ring-0": selectedInboxIssueId === request.id }
+          { "ring-0": isActive }
         )}
       >
         <div className="space-y-0.5">
@@ -72,12 +74,16 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
                 showTooltip
               />
               <div className="min-w-0">
-                <div className="truncate text-[15px] leading-5 font-semibold text-primary">{requesterName}</div>
+                <div
+                  className={cn("truncate text-[15px] leading-5 font-semibold", isActive ? "text-[#0b1117]" : "text-primary")}
+                >
+                  {requesterName}
+                </div>
               </div>
             </div>
 
             <div className="flex shrink-0 items-center gap-2">
-              <div className="text-11 font-medium text-tertiary">
+              <div className={cn("text-11 font-medium", isActive ? "text-[#17212b]/70" : "text-tertiary")}>
                 {issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
               </div>
               <div className="flex items-center gap-2">
@@ -91,11 +97,18 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
             </div>
           </div>
 
-          <div className="truncate pl-10 text-[12px] font-medium leading-4 text-secondary">{contourName}</div>
+          <div className={cn("truncate pl-10 text-[12px] font-medium leading-4", isActive ? "text-[#17212b]/75" : "text-secondary")}>
+            {contourName}
+          </div>
         </div>
 
         <div className="flex flex-1 items-center justify-center px-5 py-2 text-center">
-          <h3 className="line-clamp-3 w-full max-w-[18.5rem] text-center text-16 leading-7 font-semibold text-primary">
+          <h3
+            className={cn(
+              "line-clamp-3 w-full max-w-[18.5rem] text-center text-16 leading-7 font-semibold",
+              isActive ? "text-[#0b1117]" : "text-primary"
+            )}
+          >
             {issue.name}
           </h3>
         </div>
@@ -125,7 +138,12 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
               tooltipContent={`${renderFormattedDate(lastUpdatedAt ?? "")}`}
               isMobile={isMobile}
             >
-              <div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">
+              <div
+                className={cn(
+                  "rounded-full px-3 py-1.5 text-12",
+                  isActive ? "bg-black/10 text-[#17212b]/80" : "bg-white/6 text-secondary"
+                )}
+              >
                 {renderFormattedDate(lastUpdatedAt ?? "")}
               </div>
             </Tooltip>

plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx

@@ -100,7 +100,7 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
               </div>
             </div>
           ) : filteredRequestIds.length > 0 ? (
-            <div key={resolvedTab} className="space-y-3">
+            <div key={resolvedTab} className="space-y-4 pb-1">
               {filteredRequestIds.map((requestId) => (
                 <ExternalContoursListItem
                   key={requestId}