From 0260b8110d9dbe26bc62eab9fec50f14f093c99f Mon Sep 17 00:00:00 2001
From: Ricardo Mancinas <rmancinas@freakma.net>
Date: Thu, 23 Jul 2026 17:42:41 -0700
Subject: [PATCH] fix(catalogos): render child editor in-place of edited row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The add/edit form was appended after the whole table, so on long lists
(e.g. /catalogos aseguradoras, 16+ rows) clicking Editar on a top row
opened the form far below the fold — appearing to do nothing. Render the
edit form in place of its row, and the add form as the first table row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/web/src/components/ChildCollection.tsx | 73 +++++++++++++--------
 1 file changed, 44 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/components/ChildCollection.tsx b/apps/web/src/components/ChildCollection.tsx
index af3d764..bd4a5eb 100644
--- a/apps/web/src/components/ChildCollection.tsx
+++ b/apps/web/src/components/ChildCollection.tsx
@@ -118,6 +118,16 @@ export function ChildCollection({
     }
   }
 
+  const colCount = config.fields.length + (canEdit ? 1 : 0);
+
+  function editorRow() {
+    return (
+      <tr>
+        <td colSpan={colCount}>{editor()}</td>
+      </tr>
+    );
+  }
+
   function editor() {
     return (
       <div className="child-editor">
@@ -196,39 +206,44 @@ export function ChildCollection({
               </tr>
             </thead>
             <tbody>
-              {rows.map((row) => (
-                <tr key={String(row.id)}>
-                  {config.fields.map((f) => (
-                    <td key={f.key}>{cellText(f, row[f.key])}</td>
-                  ))}
-                  {canEdit && (
-                    <td>
-                      <div className="row-actions">
-                        <button
-                          type="button"
-                          className="btn btn-ghost"
-                          onClick={() => startEdit(row)}
-                        >
-                          Editar
-                        </button>
-                        <button
-                          type="button"
-                          className="btn btn-ghost"
-                          onClick={() => remove(String(row.id))}
-                        >
-                          Eliminar
-                        </button>
-                      </div>
-                    </td>
-                  )}
-                </tr>
-              ))}
+              {adding && editorRow()}
+              {rows.map((row) =>
+                editingId === String(row.id) ? (
+                  <tr key={String(row.id)}>
+                    <td colSpan={colCount}>{editor()}</td>
+                  </tr>
+                ) : (
+                  <tr key={String(row.id)}>
+                    {config.fields.map((f) => (
+                      <td key={f.key}>{cellText(f, row[f.key])}</td>
+                    ))}
+                    {canEdit && (
+                      <td>
+                        <div className="row-actions">
+                          <button
+                            type="button"
+                            className="btn btn-ghost"
+                            onClick={() => startEdit(row)}
+                          >
+                            Editar
+                          </button>
+                          <button
+                            type="button"
+                            className="btn btn-ghost"
+                            onClick={() => remove(String(row.id))}
+                          >
+                            Eliminar
+                          </button>
+                        </div>
+                      </td>
+                    )}
+                  </tr>
+                ),
+              )}
             </tbody>
           </table>
         </div>
       )}
-
-      {(adding || editingId !== null) && editor()}
     </div>
   );
 }