From 7a28d3ad3365004f118f5b341e7750175c97e983 Mon Sep 17 00:00:00 2001
From: AI Assistant <ai@architools.local>
Date: Tue, 24 Mar 2026 22:03:41 +0200
Subject: [PATCH] fix(rgi): proper table layout with td per column for
 alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/app/(modules)/rgi-test/page.tsx | 131 ++++++++++++++--------------
 1 file changed, 64 insertions(+), 67 deletions(-)

diff --git a/src/app/(modules)/rgi-test/page.tsx b/src/app/(modules)/rgi-test/page.tsx
index e269244..0e3131f 100644
--- a/src/app/(modules)/rgi-test/page.tsx
+++ b/src/app/(modules)/rgi-test/page.tsx
@@ -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>