scrollabe issue table

packages/frontend/src/components/issues-table.tsx

@@ -3,7 +3,6 @@ import Avatar from "@/components/avatar";
 import { useSelection } from "@/components/selection-provider";
 import StatusTag from "@/components/status-tag";
 import Icon, { type IconName } from "@/components/ui/icon";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { useIssues, useSelectedOrganisation, useSelectedProject } from "@/lib/query/hooks";
 import { cn } from "@/lib/utils";
 
@@ -155,29 +154,33 @@ export function IssuesTable({
   const showAssignee = columns.assignee == null || columns.assignee === true;
 
   return (
-    <Table className={cn("table-fixed", className)}>
+    <div className={cn("h-full overflow-auto border-t", className)}>
-      <TableHeader>
+      <table className="w-full table-fixed border-collapse text-sm border-l border-r ">
-        <TableRow hoverEffect={false} className="bg-secondary">
+        <thead className="sticky top-0 z-10 bg-secondary">
+          <tr className="border-b h-[25px]">
             {showId && (
-            <TableHead className="text-right w-10 border-r text-xs font-medium text-muted-foreground">
+              <th className="text-right w-10 border-r text-xs font-medium text-muted-foreground px-2 align-middle">
                 ID
-            </TableHead>
+              </th>
+            )}
+            {showTitle && (
+              <th className="text-xs font-medium text-muted-foreground px-2 align-middle text-left">Title</th>
             )}
-          {showTitle && <TableHead className="text-xs font-medium text-muted-foreground">Title</TableHead>}
             {showDescription && (
-            <TableHead className="text-xs font-medium text-muted-foreground">Description</TableHead>
+              <th className="text-xs font-medium text-muted-foreground px-2 align-middle text-left">
+                Description
+              </th>
             )}
-          {/* below is kept blank to fill the space, used as the "Assignee" column */}
+            {showAssignee && <th className="w-[1%] px-2"></th>}
-          {showAssignee && <TableHead className="w-[1%]"></TableHead>}
+          </tr>
-        </TableRow>
+        </thead>
-      </TableHeader>
+        <tbody>
-      <TableBody>
           {issues.map((issueData) => {
             const isSelected = issueData.Issue.id === selectedIssueId;
             return (
-            <TableRow
+              <tr
                 key={issueData.Issue.id}
-              className={cn("cursor-pointer max-w-full")}
+                className={cn("cursor-pointer h-[25px] border-b hover:bg-muted/40")}
                 onClick={() => {
                   if (isSelected) {
                     selectIssue(null);
@@ -187,9 +190,9 @@ export function IssuesTable({
                 }}
               >
                 {showId && (
-                <TableCell
+                  <td
                     className={cn(
-                    "font-medium border-r text-right p-0",
+                      "font-medium border-r text-right p-0 align-middle",
                       (isSelected || highlighted?.includes(issueData.Issue.id)) &&
                         "shadow-[inset_1px_1px_0_0_var(--personality),inset_0_-1px_0_0_var(--personality)]",
                     )}
@@ -201,12 +204,12 @@ export function IssuesTable({
                     >
                       {issueData.Issue.number.toString().padStart(3, "0")}
                     </a>
-                </TableCell>
+                  </td>
                 )}
                 {showTitle && (
-                <TableCell
+                  <td
                     className={cn(
-                    "min-w-0 p-0",
+                      "min-w-0 p-0 align-middle",
                       (isSelected || highlighted?.includes(issueData.Issue.id)) &&
                         "shadow-[inset_0_1px_0_0_var(--personality),inset_0_-1px_0_0_var(--personality)]",
                     )}
@@ -233,12 +236,12 @@ export function IssuesTable({
                         )}
                       <span className="truncate">{issueData.Issue.title}</span>
                     </a>
-                </TableCell>
+                  </td>
                 )}
                 {showDescription && (
-                <TableCell
+                  <td
                     className={cn(
-                    "overflow-hidden p-0",
+                      "overflow-hidden p-0 align-middle",
                       (isSelected || highlighted?.includes(issueData.Issue.id)) &&
                         "shadow-[inset_0_1px_0_0_var(--personality),inset_0_-1px_0_0_var(--personality)]",
                     )}
@@ -250,12 +253,12 @@ export function IssuesTable({
                     >
                       {issueData.Issue.description}
                     </a>
-                </TableCell>
+                  </td>
                 )}
                 {showAssignee && (
-                <TableCell
+                  <td
                     className={cn(
-                    "h-[32px] p-0",
+                      "h-[32px] p-0 align-middle",
                       (isSelected || highlighted?.includes(issueData.Issue.id)) &&
                         "shadow-[inset_0_1px_0_0_var(--personality),inset_-1px_0_0_0_var(--personality),inset_0_-1px_0_0_var(--personality)]",
                     )}
@@ -287,12 +290,13 @@ export function IssuesTable({
                           </div>
                         )}
                     </a>
-                </TableCell>
+                  </td>
                 )}
-            </TableRow>
+              </tr>
             );
           })}
-      </TableBody>
+        </tbody>
-    </Table>
+      </table>
+    </div>
   );
 }

packages/frontend/src/pages/Issues.tsx

@@ -667,15 +667,13 @@ export default function Issues() {
 
       {selectedOrganisationId && selectedProjectId && issuesData.length > 0 && (
         <ResizablePanelGroup className={`flex-1`}>
-          <ResizablePanel id={"left"} minSize={400}>
+          <ResizablePanel id={"left"} minSize={400} className="h-full overflow-hidden">
-            <div className="border w-full flex-shrink">
             <IssuesTable
               columns={{ description: false }}
               className="w-full"
               filters={issueFilters}
               highlighted={highlighted}
             />
-            </div>
           </ResizablePanel>
 
           {selectedIssue && !showIssueModal && (