From ba34162eebfa28a0f503c52351c036b6e9a2ff64 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Tue, 21 Apr 2026 08:03:03 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=B8?=
 =?UTF-8?q?=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D1=8B=20=D0=BA=D0=B0=D1=80=D1=82?=
 =?UTF-8?q?=D0=BE=D1=87=D0=B5=D0=BA=20=D0=B2=D0=BD=D0=B5=D1=88=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=85=20=D0=BA=D0=BE=D0=BD=D1=82=D1=83=D1=80=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../external-contours/board-column.tsx        | 10 ++++----
 .../projects/external-contours/board-item.tsx |  4 ++--
 .../projects/external-contours/board-root.tsx |  7 +++++-
 .../external-contours/issue-header.tsx        |  9 +++----
 .../external-contours/issue-properties.tsx    |  2 +-
 .../projects/external-contours/issue-root.tsx |  2 +-
 .../projects/external-contours/peek-shell.tsx |  4 ++--
 .../external-contours/subscription.tsx        | 20 +++++++++-------
 .../issues/issue-detail/subscription.tsx      | 24 ++++++++++---------
 .../issues/peek-overview/header.tsx           |  3 ++-
 10 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/plane-src/apps/web/ce/components/projects/external-contours/board-column.tsx b/plane-src/apps/web/ce/components/projects/external-contours/board-column.tsx
index ee1d15f..6abce97 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/board-column.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/board-column.tsx
@@ -41,15 +41,15 @@ export const ExternalContoursBoardColumn = observer(function ExternalContoursBoa
       : t("external_contours_page.board.empty.incoming_description");
 
   return (
-    <section className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[28px] bg-surface-2/30">
-      <div className="flex items-center justify-between gap-3 border-b border-subtle/40 px-5 py-4">
+    <section className="flex h-full min-h-0 w-[350px] flex-shrink-0 flex-col">
+      <div className="flex items-center justify-between gap-3 py-1.5">
         <div className="text-15 font-semibold text-primary">{title}</div>
         <div className="rounded-full bg-white/5 px-2 py-1 text-12 font-semibold text-secondary">{totalCount}</div>
       </div>
 
-      <div className="vertical-scrollbar scrollbar-md min-h-0 flex-1 overflow-y-auto p-4">
+      <div className="vertical-scrollbar scrollbar-md -mr-2 h-full min-h-[120px] flex-1 overflow-y-auto pr-2 pt-3">
         {requestIds.length > 0 ? (
-          <div className="space-y-4">
+          <>
             {requestIds.map((requestId) => {
               const request = getRequestById(requestId);
               if (!request) return null;
@@ -65,7 +65,7 @@ export const ExternalContoursBoardColumn = observer(function ExternalContoursBoa
                 />
               );
             })}
-          </div>
+          </>
         ) : (
           <div className="flex h-full min-h-[18rem] items-center justify-center">
             <ExternalContoursEmptyState title={emptyTitle} description={emptyDescription} />
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/board-item.tsx b/plane-src/apps/web/ce/components/projects/external-contours/board-item.tsx
index a654ad4..9292ce7 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/board-item.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/board-item.tsx
@@ -219,10 +219,10 @@ export const ExternalContoursBoardItem = observer(function ExternalContoursBoard
   };
 
   return (
-    <div className="block">
+    <div className="group/kanban-block relative mb-2">
       <div
         data-active={isActive}
-        className="nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col px-6 py-5 transition-all hover:bg-white/5"
+        className="nodedc-external-card relative flex min-h-[220px] w-full cursor-pointer flex-col p-4 transition-all hover:bg-white/5"
         role="button"
         tabIndex={0}
         onClick={openDetail}
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/board-root.tsx b/plane-src/apps/web/ce/components/projects/external-contours/board-root.tsx
index 4da1971..4e0f2aa 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/board-root.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/board-root.tsx
@@ -77,7 +77,12 @@ export const ExternalContoursBoardRoot = observer(function ExternalContoursBoard
             </div>
           )}
 
-          <div className={cn("grid min-h-0 h-full grid-cols-1 gap-5 transition-opacity xl:grid-cols-2", { "opacity-60": isFiltering })}>
+          <div
+            className={cn(
+              "horizontal-scrollbar flex h-full min-h-0 items-stretch gap-4 overflow-x-auto overflow-y-hidden pb-1 transition-opacity",
+              { "opacity-60": isFiltering }
+            )}
+          >
             <ExternalContoursBoardColumn
               currentTab={currentTab}
               direction="outgoing"
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx b/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
index 1f99436..077a2a1 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
@@ -216,11 +216,11 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
       />
 
       <Row
-        className={`relative z-15 hidden h-full w-full items-center justify-between gap-4 px-6 py-5 lg:flex ${
+        className={`relative z-15 hidden w-full items-center justify-between gap-3 px-5 py-3.5 lg:flex ${
           currentMode?.key === "full-screen" ? "border-b border-subtle/70" : ""
         }`}
       >
-        <div className="flex min-w-0 items-center gap-4">
+        <div className="flex min-w-0 items-center gap-3">
           <Tooltip tooltipContent={t("common.close_peek_view")}>
             <button onClick={removeRoutePeekId}>
               <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
@@ -320,7 +320,8 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
                 isSubscribed={isSubscribed}
                 loading={isSubscriptionLoading}
                 onToggle={handleToggleSubscription}
-                buttonClassName="!h-10 rounded-[18px] border-transparent bg-layer-2/80 px-4 shadow-none backdrop-blur-xl hover:!bg-layer-2-active focus-visible:outline-none"
+                iconOnly
+                buttonClassName="size-10 rounded-[18px] border-transparent bg-layer-2/80 px-0 shadow-none backdrop-blur-xl hover:!bg-layer-2-active focus-visible:outline-none"
               />
             )}
 
@@ -347,7 +348,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
         </div>
       </Row>
 
-      <Header className="justify-start lg:hidden">
+      <Header className="justify-start px-4 py-3 lg:hidden">
         <div className="flex w-full items-center gap-2">
           <button onClick={removeRoutePeekId}>
             <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx b/plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx
index 0dba6b6..7462acc 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx
@@ -37,7 +37,7 @@ export const ExternalContoursIssueContentProperties = observer(function External
       <div className="w-full overflow-visible">
         <h5 className="mb-2 text-body-sm-medium">{t("external_contours_page.properties.section_title")}</h5>
         <div className={`${!isEditable ? "opacity-60" : ""}`}>
-          <div className="flex flex-col gap-3">
+          <div className="grid grid-cols-2 gap-3">
             <div className="nodedc-external-property-row">
               <div className="nodedc-external-property-label">
                 <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx b/plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
index a058bb9..53661a1 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
@@ -193,7 +193,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
 
         <div className="nodedc-external-section flex flex-col gap-3 px-4 py-4">
           <div className="text-body-sm-medium">{t("external_contours_page.properties.section_title")}</div>
-          <div className="flex flex-col gap-3 text-13 text-secondary">
+          <div className="grid grid-cols-2 gap-3 text-13 text-secondary">
             <div className="nodedc-external-property-row">
               <div className="nodedc-external-property-label">
                 <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/peek-shell.tsx b/plane-src/apps/web/ce/components/projects/external-contours/peek-shell.tsx
index b59f981..5303de5 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/peek-shell.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/peek-shell.tsx
@@ -195,9 +195,9 @@ export const ExternalContoursPeekShell = observer(function ExternalContoursPeekS
         />
         <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
           {["side-peek", "modal"].includes(peekMode) ? (
-            <div className="relative flex flex-col gap-4 px-8 py-6">{children}</div>
+            <div className="relative flex flex-col gap-4 px-6 pt-3 pb-5">{children}</div>
           ) : (
-            <div className="relative h-full w-full overflow-auto px-6 py-5">{children}</div>
+            <div className="relative h-full w-full overflow-auto px-5 pt-3 pb-4">{children}</div>
           )}
         </div>
       </div>
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx b/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx
index 7688077..03e0772 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx
@@ -84,18 +84,19 @@ type TExternalContourSubscriptionButtonProps = {
   loading: boolean;
   onToggle: () => Promise<void>;
   buttonClassName?: string;
+  iconOnly?: boolean;
 };
 
 export const ExternalContourSubscriptionButton = observer(function ExternalContourSubscriptionButton(
   props: TExternalContourSubscriptionButtonProps
 ) {
-  const { isSubscribed, loading, onToggle, buttonClassName } = props;
+  const { isSubscribed, loading, onToggle, buttonClassName, iconOnly = false } = props;
   const { t } = useTranslation();
 
   if (isSubscribed === undefined) {
     return (
       <Loader>
-        <Loader.Item width="106px" height="40px" />
+        <Loader.Item width={iconOnly ? "40px" : "106px"} height="40px" />
       </Loader>
     );
   }
@@ -109,13 +110,14 @@ export const ExternalContourSubscriptionButton = observer(function ExternalConto
       disabled={loading}
       size="lg"
     >
-      {loading ? (
-        <span className="hidden sm:block">{t("common.loading")}</span>
-      ) : isSubscribed ? (
-        <span className="hidden sm:block">{t("common.actions.unsubscribe")}</span>
-      ) : (
-        <span className="hidden sm:block">{t("common.actions.subscribe")}</span>
-      )}
+      {!iconOnly &&
+        (loading ? (
+          <span className="hidden sm:block">{t("common.loading")}</span>
+        ) : isSubscribed ? (
+          <span className="hidden sm:block">{t("common.actions.unsubscribe")}</span>
+        ) : (
+          <span className="hidden sm:block">{t("common.actions.subscribe")}</span>
+        ))}
     </Button>
   );
 });
diff --git a/plane-src/apps/web/core/components/issues/issue-detail/subscription.tsx b/plane-src/apps/web/core/components/issues/issue-detail/subscription.tsx
index b139679..7579aa7 100644
--- a/plane-src/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -27,10 +27,11 @@ export type TIssueSubscription = {
   issueId: string;
   serviceType?: EIssueServiceType;
   buttonClassName?: string;
+  iconOnly?: boolean;
 };
 
 export const IssueSubscription = observer(function IssueSubscription(props: TIssueSubscription) {
-  const { workspaceSlug, projectId, issueId, serviceType = EIssueServiceType.ISSUES, buttonClassName } = props;
+  const { workspaceSlug, projectId, issueId, serviceType = EIssueServiceType.ISSUES, buttonClassName, iconOnly = false } = props;
   const { t } = useTranslation();
   // hooks
   const {
@@ -77,7 +78,7 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
   if (isNil(isSubscribed))
     return (
       <Loader>
-        <Loader.Item width="106px" height="28px" />
+        <Loader.Item width={iconOnly ? "40px" : "106px"} height={iconOnly ? "40px" : "28px"} />
       </Loader>
     );
 
@@ -91,15 +92,16 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
         disabled={!isEditable || loading}
         size="lg"
       >
-        {loading ? (
-          <span>
-            <span className="hidden sm:block">{t("common.loading")}</span>
-          </span>
-        ) : isSubscribed ? (
-          <div className="hidden sm:block">{t("common.actions.unsubscribe")}</div>
-        ) : (
-          <div className="hidden sm:block">{t("common.actions.subscribe")}</div>
-        )}
+        {!iconOnly &&
+          (loading ? (
+            <span>
+              <span className="hidden sm:block">{t("common.loading")}</span>
+            </span>
+          ) : isSubscribed ? (
+            <div className="hidden sm:block">{t("common.actions.unsubscribe")}</div>
+          ) : (
+            <div className="hidden sm:block">{t("common.actions.subscribe")}</div>
+          ))}
       </Button>
     </div>
   );
diff --git a/plane-src/apps/web/core/components/issues/peek-overview/header.tsx b/plane-src/apps/web/core/components/issues/peek-overview/header.tsx
index 2a5dff1..50b0222 100644
--- a/plane-src/apps/web/core/components/issues/peek-overview/header.tsx
+++ b/plane-src/apps/web/core/components/issues/peek-overview/header.tsx
@@ -207,7 +207,8 @@ export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader
               workspaceSlug={workspaceSlug}
               projectId={projectId}
               issueId={issueId}
-              buttonClassName="!h-10 rounded-[18px] border-transparent bg-layer-2/80 px-4 shadow-none backdrop-blur-xl hover:!bg-layer-2-active focus-visible:outline-none"
+              iconOnly
+              buttonClassName="size-10 rounded-[18px] border-transparent bg-layer-2/80 px-0 shadow-none backdrop-blur-xl hover:!bg-layer-2-active focus-visible:outline-none"
             />
           )}
           <Tooltip tooltipContent={t("common.actions.copy_link")} isMobile={isMobile}>