Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 1 commit into from
Dec 17, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/core/components/issues/issue-detail/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button height has been changed from h-auto to h-6 for consistency. However, the same PriorityDropdown component in peek-overview/properties.tsx (line 121) still uses h-auto. This inconsistency may result in visual differences between the issue detail sidebar and peek overview. Consider updating both locations to use the same height value for consistency.

Copilot uses AI. Check for mistakes.
/>
</SidebarPropertyListItem>

Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/issues/issue-layouts/list/block-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}`}
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The border color has been changed from border-b-subtle-1 to border-b-subtle. However, other similar components in the codebase still use border-b-subtle-1 (e.g., spreadsheet/issue-row.tsx line 91, workspace-draft/draft-issue-block.tsx line 123). This inconsistency may result in visual differences between different issue list layouts. Consider either keeping the original border-b-subtle-1 or updating all similar usages for consistency.

Copilot uses AI. Check for mistakes.
verticalOffset={100}
defaultValue={shouldRenderByDefault || isIssueNew(issuesMap[issueId])}
placeholderChildren={<ListLoaderItemRow shouldAnimate={false} renderForPlaceHolder defaultPropertyCount={4} />}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/issues/issue-layouts/list/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/issues/issue-layouts/list/list-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})}
Comment on lines +253 to 256
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find the component file
find . -name "list-group.tsx" -type f 2>/dev/null | head -5

Repository: makeplane/plane

Length of output: 289

🏁 Script executed:

#!/bin/bash
# Read the component file around lines 253-256
wc -l ./apps/web/core/components/issues/issue-layouts/list/list-group.tsx

Repository: makeplane/plane

Length of output: 130

🏁 Script executed:

#!/bin/bash
# Read lines around 253-256 with context
sed -n '240,270p' ./apps/web/core/components/issues/issue-layouts/list/list-group.tsx

Repository: makeplane/plane

Length of output: 1255

🏁 Script executed:

#!/bin/bash
# Find Tailwind config files
find . -name "tailwind.config*" -o -name "tailwind*config*" | grep -E "\.js$|\.ts$|\.cjs$|\.mjs$" | head -10

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Find Tailwind config with more specific search
fd -i "tailwind" --type f | grep -E "config|theme" | head -20

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Check common Tailwind config locations
ls -la packages/tailwind-config/ 2>/dev/null || echo "Not found in packages/tailwind-config"

Repository: makeplane/plane

Length of output: 627

🏁 Script executed:

#!/bin/bash
# Search for border-accent-strong definition
rg "border-accent-strong|border-custom-error-200" --type ts --type tsx -B2 -A2 | head -50

Repository: makeplane/plane

Length of output: 86

🏁 Script executed:

#!/bin/bash
# Search for border-accent-strong definition in CSS files
rg "border-accent-strong|border-custom-error-200" --type css -B2 -A2 | head -100

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Check the tailwind config CSS and variables
cat packages/tailwind-config/variables.css | grep -A5 -B5 "border-accent-strong\|border-custom-error" | head -50

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Look at the index.css to understand the color system
cat packages/tailwind-config/index.css

Repository: makeplane/plane

Length of output: 3980

🏁 Script executed:

#!/bin/bash
# Check the variables.css for border color definitions
cat packages/tailwind-config/variables.css | grep -E "border-accent-strong|border-custom-error|--color-border|--border" | head -30

Repository: makeplane/plane

Length of output: 1516

🏁 Script executed:

#!/bin/bash
# Search broader for accent and error color definitions
cat packages/tailwind-config/variables.css | grep -E "accent|error" | head -50

Repository: makeplane/plane

Length of output: 2635

🏁 Script executed:

#!/bin/bash
# Get the full variables.css to understand the color system
head -200 packages/tailwind-config/variables.css

Repository: makeplane/plane

Length of output: 9482

🏁 Script executed:

#!/bin/bash
# Check AGENTS.md for border utility definitions
cat packages/tailwind-config/AGENTS.md | grep -A10 -B10 "border-accent-strong\|border-custom-error\|border utilities"

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Search for custom utility definitions for border-accent-strong
rg "border-accent-strong" . --type css -B5 -A5

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Look for where border utilities are defined in @utility or @layer
cat packages/tailwind-config/index.css | grep -A20 "@utility.*border"

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Check AGENTS.md content related to borders
head -500 packages/tailwind-config/AGENTS.md | tail -400

Repository: makeplane/plane

Length of output: 10827

🏁 Script executed:

#!/bin/bash
# Search for error color or custom-error definitions
cat packages/tailwind-config/variables.css | grep -i "error\|custom-error" | head -30

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Look at the full context of how border utilities might be defined
grep -r "border-accent-strong\|border-custom-error" packages/tailwind-config/ 2>/dev/null || echo "Not in tailwind-config"

Repository: makeplane/plane

Length of output: 81

🏁 Script executed:

#!/bin/bash
# Search across the entire repo for border-custom-error-200
rg "border-custom-error-200" --type css --type ts -B3 -A3 | head -100

Repository: makeplane/plane

Length of output: 759

🏁 Script executed:

#!/bin/bash
# Search for custom-error color definitions
rg "custom-error|--color-custom-error" . --type css -B2 -A2 | head -50

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Check if there's a Tailwind plugin or config file in web/
find apps/web -name "tailwind*" -o -name "*theme*" | grep -E "\.(ts|js|css)$" | head -20

Repository: makeplane/plane

Length of output: 136

🏁 Script executed:

#!/bin/bash
# Search for error color definitions in variables.css
cat packages/tailwind-config/variables.css | grep -i "error" -B2 -A2

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Check what "custom-error" might be - search web app for custom colors
rg "custom-error|--color.*error" apps/web --type css --type ts -B2 -A2 | head -50

Repository: makeplane/plane

Length of output: 595

🏁 Script executed:

#!/bin/bash
# Look at the actual rendered CSS output or check if border-custom-error-200 is a standard Tailwind class
# First, check if it might be a typo and should be something else
rg "border.*error" apps/web/core/components/issues/issue-layouts/list/ -B3 -A3

Repository: makeplane/plane

Length of output: 759

🏁 Script executed:

#!/bin/bash
# Check if there's a custom Tailwind plugin that might define these
find . -name "*.ts" -o -name "*.js" | xargs grep -l "border-accent-strong\|border-custom-error" 2>/dev/null | grep -E "config|plugin|theme" | head -10

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Check what border utilities actually exist - look in node_modules or check if these are dynamically generated
# First, let's see if we can find the actual utility definitions in the generated CSS or theme
rg "@utility.*border" packages/tailwind-config/ -A5 | head -50

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Most importantly: check the full component to see what happened before and after the change
sed -n '245,265p' apps/web/core/components/issues/issue-layouts/list/list-group.tsx

Repository: makeplane/plane

Length of output: 852

🏁 Script executed:

#!/bin/bash
# Check if border-custom-error exists - search for "error" in color definitions
cat packages/tailwind-config/variables.css | grep -E "error|danger" | head -20

Repository: makeplane/plane

Length of output: 1316

🏁 Script executed:

#!/bin/bash
# Look for red or danger colors that might be used for errors
cat packages/tailwind-config/variables.css | grep -E "red-|danger|crimson" | grep border | head -20

Repository: makeplane/plane

Length of output: 918

🏁 Script executed:

#!/bin/bash
# Check git history to see what was removed from this line
cd apps/web/core/components/issues/issue-layouts/list && git log -p --follow -S "border-\[1px\]" -- list-group.tsx 2>/dev/null | head -100 || echo "Git history not available"

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Verify: does border-custom-error-200 exist anywhere?
rg "custom-error-200" . --type ts --type tsx --type css --type js 2>/dev/null | wc -l

Repository: makeplane/plane

Length of output: 60

🏁 Script executed:

#!/bin/bash
# Check for similar error color utilities
rg "border.*error" packages/tailwind-config/variables.css

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Check the exact git diff if available to see what changed
git diff HEAD~1 apps/web/core/components/issues/issue-layouts/list/list-group.tsx 2>/dev/null | head -50 || echo "Git diff not available"

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Double check: what border color utilities are actually defined?
cat packages/tailwind-config/variables.css | grep "^  --border-color-" | sort

Repository: makeplane/plane

Length of output: 1131

🏁 Script executed:

#!/bin/bash
# Check if there's a custom theme extension or plugin that defines custom-error
find apps/web -name "*.ts" -o -name "*.js" | xargs grep -l "custom-error\|customError" 2>/dev/null | head -5

Repository: makeplane/plane

Length of output: 41

🏁 Script executed:

#!/bin/bash
# Look for all files that import or reference border utilities to understand the pattern
rg "border-danger|border-accent" apps/web/core/components --type ts --type tsx | head -10

Repository: makeplane/plane

Length of output: 86

🏁 Script executed:

#!/bin/bash
# Confirm: search the entire codebase for any definition of custom-error-200
rg "custom-error-200|customError" . --type ts --type tsx --type js --type css 2>/dev/null || echo "No matches found"

Repository: makeplane/plane

Length of output: 75

🏁 Script executed:

#!/bin/bash
# Check if border utilities are generated from the --border-color theme variables
# Look at how border utilities work in the Tailwind config
cat packages/tailwind-config/index.css | grep -A30 "@layer\|@utility" | grep -i border

Repository: makeplane/plane

Length of output: 347

🏁 Script executed:

#!/8bin/bash
# Final check: verify the full list of available border color utilities by examining the theme
cat packages/tailwind-config/variables.css | grep "border-color" | awk '{print $1}' | sort -u

Repository: makeplane/plane

Length of output: 1436

🏁 Script executed:

#!/bin/bash
# Final verification: check if border utilities are auto-generated from the theme variables
# by looking at how Tailwind processes @theme
head -50 packages/tailwind-config/index.css

Repository: makeplane/plane

Length of output: 1047

🏁 Script executed:

#!/bin/bash
# Check if there's a possibility this is a typo and should be border-danger instead
rg "border-danger" apps/web/core/components --type ts -B2 -A2 | head -20

Repository: makeplane/plane

Length of output: 41

border-custom-error-200 is not a valid utility — use border-danger-strong instead, and add explicit border-width.

The utility border-custom-error-200 does not exist in the theme configuration. The correct semantic color is border-danger-strong. Additionally, border color and border-width are separate utilities in Tailwind — the color class alone won't create a visible border. A border-width utility must be applied separately (e.g., border for 1px).

-      className={cn(`relative flex flex-shrink-0 flex-col`, {
+      className={cn(`relative flex flex-shrink-0 flex-col border`, {
         "border-accent-strong": isDraggingOverColumn,
-        "border-custom-error-200": isDraggingOverColumn && isDropDisabled,
+        "border-danger-strong": isDraggingOverColumn && isDropDisabled,
       })}
🤖 Prompt for AI Agents 
In apps/web/core/components/issues/issue-layouts/list/list-group.tsx around
lines 253 to 256, the class "border-custom-error-200" is invalid and no border
width is applied; replace that conditional class with the theme-valid color
"border-danger-strong" and add an explicit border-width utility (for example
"border" or "border-2") when isDraggingOverColumn && isDropDisabled so the
colored border is visible.

Expand Down
18 changes: 10 additions & 8 deletions packages/ui/src/collapsible/collapsible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -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>
);
Expand Down
Loading