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
+18 -21
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,29 +536,25 @@ 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 */}
<div
className={cn( className={cn(
"flex items-center cursor-pointer hover:bg-muted/30 transition-colors border-b", "border-b cursor-pointer hover:bg-muted/30 transition-colors",
isExpanded && "bg-muted/20", isExpanded && "bg-muted/20",
)} )}
onClick={() => onClick={() =>
setExpandedPk(isExpanded ? null : pk) setExpandedPk(isExpanded ? null : pk)
} }
> >
{/* Status icon */} <td className="px-2 py-2.5 w-8">
<div className="px-2 py-2.5 shrink-0">
{solved ? ( {solved ? (
<CheckCircle2 className="h-4 w-4 text-emerald-500" /> <CheckCircle2 className="h-4 w-4 text-emerald-500" />
) : ( ) : (
<Clock className="h-4 w-4 text-muted-foreground" /> <Clock className="h-4 w-4 text-muted-foreground" />
)} )}
</div> </td>
{/* Columns */}
{columns.map((col) => ( {columns.map((col) => (
<div <td
key={col.key} key={col.key}
className={cn( className={cn(
"px-3 py-2.5 text-sm", "px-3 py-2.5 text-sm",
@@ -587,29 +583,30 @@ export default function RgiTestPage() {
) : ( ) : (
col.render(app) col.render(app)
)} )}
</div> </td>
))} ))}
{/* Expand arrow */} <td className="px-2 py-2.5 w-8">
<div className="px-2 py-2.5 shrink-0">
{isExpanded ? ( {isExpanded ? (
<ChevronUp className="h-4 w-4 text-muted-foreground" /> <ChevronUp className="h-4 w-4 text-muted-foreground" />
) : ( ) : (
<ChevronDown className="h-4 w-4 text-muted-foreground" /> <ChevronDown className="h-4 w-4 text-muted-foreground" />
)} )}
</div> </td>
</div> </tr>
{/* Expanded: issued documents */}
{isExpanded && ( {isExpanded && (
<div className="px-4 pb-3 bg-muted/10 border-b"> <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> </td>
</tr> </tr>
)}
</React.Fragment>
); );
})} })}
</tbody> </tbody>