fixed truncation issues with long issue titles

This commit is contained in:
Oliver Bryan
2026-01-17 01:32:32 +00:00
parent 45326b7854
commit f3523a9a83
2 changed files with 13 additions and 11 deletions

View File

@@ -18,18 +18,20 @@ export function IssuesTable({
className: string; className: string;
}) { }) {
return ( return (
<Table className={cn(className)}> <Table className={cn("table-fixed", className)}>
<TableHeader> <TableHeader>
<TableRow hoverEffect={false}> <TableRow hoverEffect={false}>
{(columns.id == null || columns.id === true) && ( {(columns.id == null || columns.id === true) && (
<TableHead className="text-right w-[1px] border-r">ID</TableHead> <TableHead className="text-right w-10 border-r">ID</TableHead>
)} )}
{(columns.title == null || columns.title === true) && <TableHead>Title</TableHead>} {(columns.title == null || columns.title === true) && <TableHead>Title</TableHead>}
{(columns.description == null || columns.description === true) && ( {(columns.description == null || columns.description === true) && (
<TableHead>Description</TableHead> <TableHead>Description</TableHead>
)} )}
{/* below is kept blank to fill the space, used as the "Assignee" column */} {/* below is kept blank to fill the space, used as the "Assignee" column */}
{(columns.assignee == null || columns.assignee === true) && <TableHead></TableHead>} {(columns.assignee == null || columns.assignee === true) && (
<TableHead className="w-[1%]"></TableHead>
)}
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -47,25 +49,25 @@ export function IssuesTable({
</TableCell> </TableCell>
)} )}
{(columns.title == null || columns.title === true) && ( {(columns.title == null || columns.title === true) && (
<TableCell> <TableCell className="min-w-0">
<span className="flex items-center gap-2 truncate"> <div className="flex items-center gap-2 min-w-0">
{(columns.status == null || columns.status === true) && ( {(columns.status == null || columns.status === true) && (
<StatusTag <StatusTag
status={issueData.Issue.status} status={issueData.Issue.status}
colour={statuses[issueData.Issue.status]} colour={statuses[issueData.Issue.status]}
/> />
)} )}
{issueData.Issue.title} <span className="truncate">{issueData.Issue.title}</span>
</span> </div>
</TableCell> </TableCell>
)} )}
{(columns.description == null || columns.description === true) && ( {(columns.description == null || columns.description === true) && (
<TableCell className="overflow-hide">{issueData.Issue.description}</TableCell> <TableCell className="overflow-hidden">{issueData.Issue.description}</TableCell>
)} )}
{(columns.assignee == null || columns.assignee === true) && ( {(columns.assignee == null || columns.assignee === true) && (
<TableCell className={"flex items-center justify-end px-1 py-0 h-[32px]"}> <TableCell className={"flex items-center justify-end py-0 h-[32px]"}>
{issueData.Assignees && issueData.Assignees.length > 0 && ( {issueData.Assignees && issueData.Assignees.length > 0 && (
<div className="flex items-center -space-x-2"> <div className="flex items-center -space-x-2 pr-1.5">
{issueData.Assignees.slice(0, 3).map((assignee) => ( {issueData.Assignees.slice(0, 3).map((assignee) => (
<Avatar <Avatar
key={assignee.id} key={assignee.id}

View File

@@ -554,7 +554,7 @@ export default function App() {
{selectedIssue && selectedOrganisation && ( {selectedIssue && selectedOrganisation && (
<> <>
<ResizableSeparator /> <ResizableSeparator />
<ResizablePanel id={"right"} defaultSize={"30%"} minSize={360} maxSize={"60%"}> <ResizablePanel id={"right"} defaultSize={"30%"} minSize={363} maxSize={"60%"}>
<div className="border"> <div className="border">
<IssueDetailPane <IssueDetailPane
project={selectedProject} project={selectedProject}