ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-07 18:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

scrollabe issue table

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-31 15:19:02 +00:00
parent cc0eb60bf5
commit 18300ad130
2 changed files with 147 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/frontend/src/components/issues-table.tsx
View File

@@ -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)}>
<TableHeader>
<TableRow hoverEffect={false} className="bg-secondary">
<div className={cn("h-full overflow-auto border-t", className)}>
<table className="w-full table-fixed border-collapse text-sm border-l border-r ">
<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 && <TableHead className="w-[1%]"></TableHead>}
</TableRow>
</TableHeader>
<TableBody>
{showAssignee && <th className="w-[1%] px-2"></th>}
</tr>
</thead>
<tbody>
{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>
</Table>
</tbody>
</table>
</div>
);
}

4
packages/frontend/src/pages/Issues.tsx
View File

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