gitadmin/ArchiTools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(rgi): proper table layout with td per column for alignment

Browse Source 
Replaced single colSpan td with flex layout → proper td per column.
Headers and data cells now align correctly. Expanded docs row uses
colSpan only for the detail panel.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AI Assistant
2026-03-24 22:03:41 +02:00
parent 4707c6444e
commit 7a28d3ad33
1 changed files with 64 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(modules)/rgi-test/page.tsx
+64 -67
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState, useCallback, useMemo } from "react"; import React, { useState, useCallback, useMemo } from "react";
import { Button } from "@/shared/components/ui/button"; import { Button } from "@/shared/components/ui/button";
import { Input } from "@/shared/components/ui/input"; import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label"; import { Label } from "@/shared/components/ui/label";
@@ -536,80 +536,77 @@ export default function RgiTestPage() {
const solved = app.hasSolution === 1; const solved = app.hasSolution === 1;
return ( return (
<tr key={pk} className="group"> <React.Fragment key={pk}>
<td colSpan={columns.length + 2} className="p-0"> <tr
{/* Row */} className={cn(
<div "border-b cursor-pointer hover:bg-muted/30 transition-colors",
className={cn( isExpanded && "bg-muted/20",
"flex items-center cursor-pointer hover:bg-muted/30 transition-colors border-b", )}
isExpanded && "bg-muted/20", onClick={() =>
setExpandedPk(isExpanded ? null : pk)
}
>
<td className="px-2 py-2.5 w-8">
{solved ? (
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
) : (
<Clock className="h-4 w-4 text-muted-foreground" />
)} )}
onClick={() => </td>
setExpandedPk(isExpanded ? null : pk) {columns.map((col) => (
} <td
> key={col.key}
{/* Status icon */} className={cn(
<div className="px-2 py-2.5 shrink-0"> "px-3 py-2.5 text-sm",
{solved ? ( col.className,
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
) : (
<Clock className="h-4 w-4 text-muted-foreground" />
)} )}
</div> title={col.render(app)}
{/* Columns */} >
{columns.map((col) => ( {col.key === "statusName" ? (
<div <Badge
key={col.key} variant={solved ? "default" : "secondary"}
className={cn( className={cn(
"px-3 py-2.5 text-sm", "text-[10px]",
col.className, solved &&
)} "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400",
title={col.render(app)} )}
> >
{col.key === "statusName" ? ( {col.render(app)}
<Badge </Badge>
variant={solved ? "default" : "secondary"} ) : col.key === "resolutionName" ? (
className={cn( <Badge
"text-[10px]", variant="outline"
solved && className="text-[10px]"
"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400", >
)} {col.render(app)}
> </Badge>
{col.render(app)}
</Badge>
) : col.key === "resolutionName" ? (
<Badge
variant="outline"
className="text-[10px]"
>
{col.render(app)}
</Badge>
) : (
col.render(app)
)}
</div>
))}
{/* Expand arrow */}
<div className="px-2 py-2.5 shrink-0">
{isExpanded ? (
<ChevronUp className="h-4 w-4 text-muted-foreground" />
) : ( ) : (
<ChevronDown className="h-4 w-4 text-muted-foreground" /> col.render(app)
)} )}
</div> </td>
</div> ))}
<td className="px-2 py-2.5 w-8">
{/* Expanded: issued documents */} {isExpanded ? (
{isExpanded && ( <ChevronUp className="h-4 w-4 text-muted-foreground" />
<div className="px-4 pb-3 bg-muted/10 border-b"> ) : (
<ChevronDown className="h-4 w-4 text-muted-foreground" />
)}
</td>
</tr>
{isExpanded && (
<tr>
<td
colSpan={columns.length + 2}
className="px-4 pb-3 bg-muted/10 border-b"
>
<IssuedDocsPanel <IssuedDocsPanel
applicationPk={pk} applicationPk={pk}
workspaceId={app.workspaceId} workspaceId={app.workspaceId}
/> />
</div> </td>
)} </tr>
</td> )}
</tr> </React.Fragment>
); );
})} })}
</tbody> </tbody>