[WEB-5614] chore: work item detail and list layout enhancements #8355

This commit is contained in:
Anmol Singh Bhatia
2025-12-17 16:18:14 +05:30
committed by GitHub
parent 7c6a6a3432
commit 1338e9d2a4
5 changed files with 14 additions and 12 deletions

View File

@@ -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>

View File

@@ -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} />}

View File

@@ -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

View File

@@ -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,
})}

View File

@@ -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>
);