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";
import { useState, useCallback, useMemo } from "react";
import React, { useState, useCallback, useMemo } from "react";
import { Button } from "@/shared/components/ui/button";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
@@ -536,80 +536,77 @@ export default function RgiTestPage() {
const solved = app.hasSolution === 1;
return (
<tr key={pk} className="group">
<td colSpan={columns.length + 2} className="p-0">
{/* Row */}
<div
className={cn(
"flex items-center cursor-pointer hover:bg-muted/30 transition-colors border-b",
isExpanded && "bg-muted/20",
<React.Fragment key={pk}>
<tr
className={cn(
"border-b cursor-pointer hover:bg-muted/30 transition-colors",
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={() =>
setExpandedPk(isExpanded ? null : pk)
}
>
{/* Status icon */}
<div className="px-2 py-2.5 shrink-0">
{solved ? (
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
) : (
<Clock className="h-4 w-4 text-muted-foreground" />
</td>
{columns.map((col) => (
<td
key={col.key}
className={cn(
"px-3 py-2.5 text-sm",
col.className,
)}
</div>
{/* Columns */}
{columns.map((col) => (
<div
key={col.key}
className={cn(
"px-3 py-2.5 text-sm",
col.className,
)}
title={col.render(app)}
>
{col.key === "statusName" ? (
<Badge
variant={solved ? "default" : "secondary"}
className={cn(
"text-[10px]",
solved &&
"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400",
)}
>
{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" />
title={col.render(app)}
>
{col.key === "statusName" ? (
<Badge
variant={solved ? "default" : "secondary"}
className={cn(
"text-[10px]",
solved &&
"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400",
)}
>
{col.render(app)}
</Badge>
) : col.key === "resolutionName" ? (
<Badge
variant="outline"
className="text-[10px]"
>
{col.render(app)}
</Badge>
) : (
<ChevronDown className="h-4 w-4 text-muted-foreground" />
col.render(app)
)}
</div>
</div>
{/* Expanded: issued documents */}
{isExpanded && (
<div className="px-4 pb-3 bg-muted/10 border-b">
</td>
))}
<td className="px-2 py-2.5 w-8">
{isExpanded ? (
<ChevronUp className="h-4 w-4 text-muted-foreground" />
) : (
<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
applicationPk={pk}
workspaceId={app.workspaceId}
/>
</div>
)}
</td>
</tr>
</td>
</tr>
)}
</React.Fragment>
);
})}
</tbody>