makeplane · codingwolf-at · Sep 2, 2026 · Sep 2, 2026 · Sep 2, 2026 · Sep 2, 2026
@@ -60,14 +60,14 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
           window.open(fileURL, "_blank");
         }}
       >
-        <div className="group flex h-11 items-center justify-between gap-3 pr-2 pl-9 hover:bg-surface-2">
+        <div className="group flex h-11 items-center justify-between gap-3 px-3 hover:bg-surface-2">
           <div className="flex items-center gap-3 truncate text-13">
             <div className="flex items-center gap-3">{fileIcon}</div>
             <Tooltip label={`${fileName}.${fileExtension}`} layout="stacked" disabled={isMobile}>
               <p className="truncate font-medium text-secondary">{`${fileName}.${fileExtension}`}</p>
             </Tooltip>
             <span className="flex size-1.5 rounded-full bg-layer-1" />
-            <span className="flex-shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
+            <span className="shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
           </div>
 
           <div className="flex items-center gap-3">

@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { IssueAttachmentsCollapsibleContent } from "./content";
 import { IssueAttachmentsCollapsibleTitle } from "./title";
+import { IssueAttachmentActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -33,19 +34,20 @@ export const AttachmentsCollapsible = observer(function AttachmentsCollapsible(p
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("attachments")}
-      title={
-        <IssueAttachmentsCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("attachments")}
+      trigger={<IssueAttachmentsCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <IssueAttachmentActionButton
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            disabled={disabled}
+            issueServiceType={issueServiceType}
+          />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <IssueAttachmentsCollapsibleContent
         workspaceSlug={workspaceSlug}

@@ -4,28 +4,21 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-// local imports
-import { IssueAttachmentActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
-  workspaceSlug: string;
-  projectId: string;
   issueId: string;
-  disabled: boolean;
   issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmentsCollapsibleTitle(props: Props) {
-  const { isOpen, workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { issueId, issueServiceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // store hooks
   const {
@@ -36,32 +29,12 @@ export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmen
   const issue = getIssueById(issueId);
   const attachmentCount = issue?.attachment_count ?? 0;
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.attachments")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{attachmentCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{attachmentCount}</p>
       </span>
-    ),
-    [attachmentCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.attachments")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && (
-          <IssueAttachmentActionButton
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            disabled={disabled}
-            issueServiceType={issueServiceType}
-          />
-        )
-      }
-    />
+    </span>
   );
 });
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { IssueLinksCollapsibleContent } from "./content";
 import { IssueLinksCollapsibleTitle } from "./title";
+import { IssueLinksActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -32,17 +33,14 @@ export const LinksCollapsible = observer(function LinksCollapsible(props: Props)
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("links")}
-      title={
-        <IssueLinksCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("links")}
+      trigger={<IssueLinksCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <IssueLinksActionButton issueServiceType={issueServiceType} disabled={disabled} />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <IssueLinksCollapsibleContent
         workspaceSlug={workspaceSlug}

@@ -4,26 +4,21 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-// local imports
-import { IssueLinksActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
   issueId: string;
-  disabled: boolean;
   issueServiceType: TIssueServiceType;
 };
 
 export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibleTitle(props: Props) {
-  const { isOpen, issueId, disabled, issueServiceType } = props;
+  const { issueId, issueServiceType } = props;
   // translation
   const { t } = useTranslation();
   // store hooks
@@ -36,24 +31,12 @@ export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibl
 
   const linksCount = issue?.link_count ?? 0;
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.links")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{linksCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{linksCount}</p>
       </span>
-    ),
-    [linksCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.links")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && <IssueLinksActionButton issueServiceType={issueServiceType} disabled={disabled} />
-      }
-    />
+    </span>
   );
 });
@@ -7,10 +7,11 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue, TIssueServiceType, TIssueRelationTypes } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 import { useTimeLineRelationOptions } from "@/components/relations";
@@ -137,24 +138,29 @@ export const RelationsCollapsibleContent = observer(function RelationsCollapsibl
         {filteredRelationsArray.map((relation) => (
           <div key={relation.relationKey}>
             <Collapsible
-              buttonClassName="w-full"
-              title={
-                <div className={`flex h-9 w-full items-center gap-1 px-2.5 py-1 ${relation.className}`}>
-                  <span>{relation.icon ? relation.icon(14) : null}</span>
-                  <span className="text-13 leading-5 font-medium">{relation.label}</span>
-                </div>
-              }
               defaultOpen
+              icon={
+                relation.icon ? (
+                  <span className={cn("flex items-center justify-center rounded p-0.5", relation.className)}>
+                    {relation.icon(14)}
+                  </span>
+                ) : undefined
+              }
+              trigger={<span className="text-13 leading-5 font-medium">{relation.label}</span>}
             >
-              <RelationIssueList
-                workspaceSlug={workspaceSlug}
-                issueId={issueId}
-                relationKey={relation.relationKey}
-                issueIds={relation.issueIds}
-                disabled={disabled}
-                handleIssueCrudState={handleIssueCrudState}
-                issueServiceType={issueServiceType}
-              />
+              {/* Cancels this nested Collapsible's own panel inset so rows realign under
+                  the outer Relations collapsible's single inset instead of stacking two. */}
+              <div className="-mx-3">
+                <RelationIssueList
+                  workspaceSlug={workspaceSlug}
+                  issueId={issueId}
+                  relationKey={relation.relationKey}
+                  issueIds={relation.issueIds}
+                  disabled={disabled}
+                  handleIssueCrudState={handleIssueCrudState}
+                  issueServiceType={issueServiceType}
+                />
+              </div>
             </Collapsible>
           </div>
         ))}

@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { RelationsCollapsibleContent } from "./content";
 import { RelationsCollapsibleTitle } from "./title";
+import { RelationActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -31,17 +32,14 @@ export const RelationsCollapsible = observer(function RelationsCollapsible(props
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("relations")}
-      title={
-        <RelationsCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("relations")}
+      trigger={<RelationsCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <RelationActionButton issueId={issueId} disabled={disabled} issueServiceType={issueServiceType} />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <RelationsCollapsibleContent
         workspaceSlug={workspaceSlug}

@@ -4,28 +4,23 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
 import { useTimeLineRelationOptions } from "@/components/relations";
-// local imports
-import { RelationActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
   issueId: string;
-  disabled: boolean;
   issueServiceType?: TIssueServiceType;
 };
 
 export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleTitle(props: Props) {
-  const { isOpen, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { issueId, issueServiceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // store hook
   const {
@@ -36,24 +31,12 @@ export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleT
   // derived values
   const relationsCount = getRelationCountByIssueId(issueId, ISSUE_RELATION_OPTIONS);
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.relations")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{relationsCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{relationsCount}</p>
       </span>
-    ),
-    [relationsCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.relations")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && <RelationActionButton issueId={issueId} disabled={disabled} issueServiceType={issueServiceType} />
-      }
-    />
+    </span>
   );
 });