From f3523a9a83accafb9bc747cb307dc0efb099583b Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Sat, 17 Jan 2026 01:32:32 +0000
Subject: [PATCH] fixed truncation issues with long issue titles

---
 .../frontend/src/components/issues-table.tsx  | 22 ++++++++++---------
 packages/frontend/src/pages/App.tsx           |  2 +-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/issues-table.tsx b/packages/frontend/src/components/issues-table.tsx
index a26b534..9220ded 100644
--- a/packages/frontend/src/components/issues-table.tsx
+++ b/packages/frontend/src/components/issues-table.tsx
@@ -18,18 +18,20 @@ export function IssuesTable({
     className: string;
 }) {
     return (
-        <Table className={cn(className)}>
+        <Table className={cn("table-fixed", className)}>
             <TableHeader>
                 <TableRow hoverEffect={false}>
                     {(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.description == null || columns.description === true) && (
                         <TableHead>Description</TableHead>
                     )}
                     {/* 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>
             </TableHeader>
             <TableBody>
@@ -47,25 +49,25 @@ export function IssuesTable({
                             </TableCell>
                         )}
                         {(columns.title == null || columns.title === true) && (
-                            <TableCell>
-                                <span className="flex items-center gap-2 truncate">
+                            <TableCell className="min-w-0">
+                                <div className="flex items-center gap-2 min-w-0">
                                     {(columns.status == null || columns.status === true) && (
                                         <StatusTag
                                             status={issueData.Issue.status}
                                             colour={statuses[issueData.Issue.status]}
                                         />
                                     )}
-                                    {issueData.Issue.title}
-                                </span>
+                                    <span className="truncate">{issueData.Issue.title}</span>
+                                </div>
                             </TableCell>
                         )}
                         {(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) && (
-                            <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 && (
-                                    <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) => (
                                             <Avatar
                                                 key={assignee.id}
diff --git a/packages/frontend/src/pages/App.tsx b/packages/frontend/src/pages/App.tsx
index d2a05f9..9933a5e 100644
--- a/packages/frontend/src/pages/App.tsx
+++ b/packages/frontend/src/pages/App.tsx
@@ -554,7 +554,7 @@ export default function App() {
                     {selectedIssue && selectedOrganisation && (
                         <>
                             <ResizableSeparator />
-                            <ResizablePanel id={"right"} defaultSize={"30%"} minSize={360} maxSize={"60%"}>
+                            <ResizablePanel id={"right"} defaultSize={"30%"} minSize={363} maxSize={"60%"}>
                                 <div className="border">
                                     <IssueDetailPane
                                         project={selectedProject}