mirror of
https://github.com/hex248/sprint.git
synced 2026-02-07 18:23:03 +00:00
fixed truncation issues with long issue titles
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user