fix(catalogos): render child editor in-place of edited row

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

@@ -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,7 +206,13 @@ export function ChildCollection({
               </tr>
             </thead>
             <tbody>
-              {rows.map((row) => (
+              {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>
@@ -222,13 +238,12 @@ export function ChildCollection({
                       </td>
                     )}
                   </tr>
-              ))}
+                ),
+              )}
             </tbody>
           </table>
         </div>
       )}
-
-      {(adding || editingId !== null) && editor()}
     </div>
   );
 }