From 1338e9d2a492d1efe34ac04c013c4f9f88ab3d34 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 17 Dec 2025 16:18:14 +0530
Subject: [PATCH] [WEB-5614] chore: work item detail and list layout
 enhancements #8355

---
 .../components/issues/issue-detail/sidebar.tsx |  2 +-
 .../issues/issue-layouts/list/block-root.tsx   |  2 +-
 .../issues/issue-layouts/list/default.tsx      |  2 +-
 .../issues/issue-layouts/list/list-group.tsx   |  2 +-
 packages/ui/src/collapsible/collapsible.tsx    | 18 ++++++++++--------
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
index df2d6454e..1c20716ca 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -124,7 +124,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 buttonVariant="border-with-text"
                 className="w-full grow rounded-lg"
                 buttonContainerClassName="w-full text-left px-2 h-7.5"
-                buttonClassName="w-min h-auto whitespace-nowrap"
+                buttonClassName="w-min h-6 whitespace-nowrap"
               />
             </SidebarPropertyListItem>
 
diff --git a/apps/web/core/components/issues/issue-layouts/list/block-root.tsx b/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
index e5dff2c67..10a083eed 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
@@ -130,7 +130,7 @@ export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
       <RenderIfVisible
         key={`${issueId}`}
         root={containerRef}
-        classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-subtle-1"}`}
+        classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-subtle"}`}
         verticalOffset={100}
         defaultValue={shouldRenderByDefault || isIssueNew(issuesMap[issueId])}
         placeholderChildren={<ListLoaderItemRow shouldAnimate={false} renderForPlaceHolder defaultPropertyCount={4} />}
diff --git a/apps/web/core/components/issues/issue-layouts/list/default.tsx b/apps/web/core/components/issues/issue-layouts/list/default.tsx
index 330d7af91..b4948266f 100644
--- a/apps/web/core/components/issues/issue-layouts/list/default.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/default.tsx
@@ -134,7 +134,7 @@ export const List = observer(function List(props: IList) {
             <>
               <div
                 ref={containerRef}
-                className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
+                className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto bg-surface-1"
               >
                 {groups.map((group: IGroupByColumn) => (
                   <ListGroup
diff --git a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
index 78d866840..253aab34b 100644
--- a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -250,7 +250,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   return validateEmptyIssueGroups(groupIssueCount) ? (
     <div
       ref={groupRef}
-      className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
+      className={cn(`relative flex flex-shrink-0 flex-col`, {
         "border-accent-strong": isDraggingOverColumn,
         "border-custom-error-200": isDraggingOverColumn && isDropDisabled,
       })}
diff --git a/packages/ui/src/collapsible/collapsible.tsx b/packages/ui/src/collapsible/collapsible.tsx
index f5babab07..8d83eda65 100644
--- a/packages/ui/src/collapsible/collapsible.tsx
+++ b/packages/ui/src/collapsible/collapsible.tsx
@@ -1,5 +1,4 @@
 import { Disclosure, Transition } from "@headlessui/react";
-import type { FC } from "react";
 import React, { useState, useEffect, useCallback } from "react";
 
 export type TCollapsibleProps = {
@@ -40,14 +39,17 @@ export function Collapsible(props: TCollapsibleProps) {
       </Disclosure.Button>
       <Transition
         show={localIsOpen}
-        enter="transition-max-height duration-400 ease-in-out"
-        enterFrom="max-h-0"
-        enterTo="max-h-screen"
-        leave="transition-max-height duration-400 ease-in-out"
-        leaveFrom="max-h-screen"
-        leaveTo="max-h-0"
+        enter="transition-all duration-300 ease-in-out"
+        enterFrom="grid-rows-[0fr] opacity-0"
+        enterTo="grid-rows-[1fr] opacity-100"
+        leave="transition-all duration-300 ease-in-out"
+        leaveFrom="grid-rows-[1fr] opacity-100"
+        leaveTo="grid-rows-[0fr] opacity-0"
+        className="grid overflow-hidden"
       >
-        <Disclosure.Panel static>{children}</Disclosure.Panel>
+        <Disclosure.Panel static className="min-h-0">
+          {children}
+        </Disclosure.Panel>
       </Transition>
     </Disclosure>
   );