Keeping the layout and colums when editing items in the lists

admin/activities.php

@@ -94,40 +94,52 @@ show_alerts();
 </form>
 <?php endforeach; ?>
 
-<table class="tbl">
+<table class="tbl tbl-fixed">
+  <colgroup>
+    <col style="width:60px">
+    <col>
+    <col style="width:180px">
+    <col style="width:100px">
+    <col style="width:200px">
+  </colgroup>
   <thead><tr><th>#</th><th>Name</th><th>Group</th><th>Sort</th><th></th></tr></thead>
   <tbody>
   <?php foreach ($activities as $a):
     $id = $a['activityID'];
   ?>
-  <tr id="view-<?= $id ?>">
+  <tr id="row-<?= $id ?>" data-editing="false">
     <td style="color:var(--muted)"><?= $id ?></td>
-    <td><?= htmlspecialchars($a['activityName']) ?></td>
-    <td><span class="badge badge-group"><?= htmlspecialchars($a['groupName']) ?></span></td>
-    <td><?= $a['sortOrder'] ?></td>
-    <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
-      <form method="POST" onsubmit="return confirm('Delete this activity?')">
-        <input type="hidden" name="action" value="delete">
-        <input type="hidden" name="activityID" value="<?= $id ?>">
-        <button class="btn btn-sm btn-danger">Delete</button>
-      </form>
+    <td>
+      <div class="view"><?= htmlspecialchars($a['activityName']) ?></div>
+      <div class="edit"><input type="text" name="activityName" form="edit-form-<?= $id ?>" value="<?= htmlspecialchars($a['activityName']) ?>" required></div>
+    </td>
+    <td>
+      <div class="view"><span class="badge badge-group"><?= htmlspecialchars($a['groupName']) ?></span></div>
+      <div class="edit">
+        <select name="groupID" form="edit-form-<?= $id ?>" required>
+          <?php foreach ($groups as $g): ?>
+          <option value="<?= $g['groupID'] ?>" <?= $a['groupID'] == $g['groupID'] ? 'selected' : '' ?>><?= htmlspecialchars($g['groupName']) ?></option>
+          <?php endforeach; ?>
+        </select>
+      </div>
     </td>
-  </tr>
-  <tr id="edit-<?= $id ?>" style="display:none;background:rgba(79,209,197,.04);">
-    <td style="color:var(--muted)"><?= $id ?></td>
-    <td><input type="text" name="activityName" form="edit-form-<?= $id ?>" value="<?= htmlspecialchars($a['activityName']) ?>" required style="margin:0;width:100%;"></td>
     <td>
-      <select name="groupID" form="edit-form-<?= $id ?>" required style="margin:0;width:100%;">
-        <?php foreach ($groups as $g): ?>
-        <option value="<?= $g['groupID'] ?>" <?= $a['groupID'] == $g['groupID'] ? 'selected' : '' ?>><?= htmlspecialchars($g['groupName']) ?></option>
-        <?php endforeach; ?>
-      </select>
+      <div class="view"><?= $a['sortOrder'] ?></div>
+      <div class="edit"><input type="number" name="sortOrder" form="edit-form-<?= $id ?>" value="<?= (int)$a['sortOrder'] ?>" min="0"></div>
     </td>
-    <td><input type="number" name="sortOrder" form="edit-form-<?= $id ?>" value="<?= (int)$a['sortOrder'] ?>" min="0" style="margin:0;width:100%;max-width:80px;"></td>
-    <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <button type="submit" form="edit-form-<?= $id ?>" class="btn btn-sm btn-primary">💾 Save</button>
-      <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+    <td>
+      <div class="view actions-buttons">
+        <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
+        <form method="POST" onsubmit="return confirm('Delete this activity?')">
+          <input type="hidden" name="action" value="delete">
+          <input type="hidden" name="activityID" value="<?= $id ?>">
+          <button class="btn btn-sm btn-danger">Delete</button>
+        </form>
+      </div>
+      <div class="edit actions-buttons">
+        <button type="submit" form="edit-form-<?= $id ?>" class="btn btn-sm btn-primary">💾 Save</button>
+        <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+      </div>
     </td>
   </tr>
   <?php endforeach; ?>
@@ -136,13 +148,13 @@ show_alerts();
 
 <script>
 function startEdit(id) {
-  document.getElementById('view-' + id).style.display = 'none';
-  document.getElementById('edit-' + id).style.display = '';
-  document.querySelector('#edit-' + id + ' input[name="activityName"]').focus();
+  var row = document.getElementById('row-' + id);
+  row.dataset.editing = 'true';
+  var input = row.querySelector('.edit input[name="activityName"]');
+  if (input) input.focus();
 }
 function cancelEdit(id) {
-  document.getElementById('edit-' + id).style.display = 'none';
-  document.getElementById('view-' + id).style.display = '';
+  document.getElementById('row-' + id).dataset.editing = 'false';
 }
 </script>
 

admin/activity_groups.php

@@ -77,7 +77,14 @@ show_alerts();
 </form>
 <?php endforeach; ?>
 
-<table class="tbl">
+<table class="tbl tbl-fixed">
+  <colgroup>
+    <col style="width:60px">
+    <col>
+    <col style="width:100px">
+    <col style="width:100px">
+    <col style="width:200px">
+  </colgroup>
   <thead><tr><th>#</th><th>Name</th><th>Sort</th><th>Activities</th><th></th></tr></thead>
   <tbody>
   <?php foreach ($groups as $g):
@@ -86,28 +93,30 @@ show_alerts();
     $actCount = $cnt->fetchColumn();
     $id = $g['groupID'];
   ?>
-  <tr id="view-<?= $id ?>">
+  <tr id="row-<?= $id ?>" data-editing="false">
     <td style="color:var(--muted)"><?= $id ?></td>
-    <td><?= htmlspecialchars($g['groupName']) ?></td>
-    <td><?= $g['sortOrder'] ?></td>
-    <td><span class="badge badge-group"><?= $actCount ?></span></td>
-    <td style="text-align:right;display:flex;gap:.4rem;justify-content:flex-end;">
-      <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
-      <form method="POST" onsubmit="return confirm('Delete this group and ALL its activities?')">
-        <input type="hidden" name="action" value="delete">
-        <input type="hidden" name="groupID" value="<?= $id ?>">
-        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
-      </form>
+    <td>
+      <div class="view"><?= htmlspecialchars($g['groupName']) ?></div>
+      <div class="edit"><input type="text" name="groupName" form="edit-form-<?= $id ?>" value="<?= htmlspecialchars($g['groupName']) ?>" required></div>
+    </td>
+    <td>
+      <div class="view"><?= $g['sortOrder'] ?></div>
+      <div class="edit"><input type="number" name="sortOrder" form="edit-form-<?= $id ?>" value="<?= (int)$g['sortOrder'] ?>" min="0"></div>
     </td>
-  </tr>
-  <tr id="edit-<?= $id ?>" style="display:none;background:rgba(79,209,197,.04);">
-    <td style="color:var(--muted)"><?= $id ?></td>
-    <td><input type="text" name="groupName" form="edit-form-<?= $id ?>" value="<?= htmlspecialchars($g['groupName']) ?>" required style="margin:0;width:100%;"></td>
-    <td><input type="number" name="sortOrder" form="edit-form-<?= $id ?>" value="<?= (int)$g['sortOrder'] ?>" min="0" style="margin:0;width:100%;max-width:80px;"></td>
     <td><span class="badge badge-group"><?= $actCount ?></span></td>
-    <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <button type="submit" form="edit-form-<?= $id ?>" class="btn btn-sm btn-primary">💾 Save</button>
-      <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+    <td>
+      <div class="view actions-buttons">
+        <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
+        <form method="POST" onsubmit="return confirm('Delete this group and ALL its activities?')">
+          <input type="hidden" name="action" value="delete">
+          <input type="hidden" name="groupID" value="<?= $id ?>">
+          <button type="submit" class="btn btn-sm btn-danger">Delete</button>
+        </form>
+      </div>
+      <div class="edit actions-buttons">
+        <button type="submit" form="edit-form-<?= $id ?>" class="btn btn-sm btn-primary">💾 Save</button>
+        <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+      </div>
     </td>
   </tr>
   <?php endforeach; ?>
@@ -116,13 +125,13 @@ show_alerts();
 
 <script>
 function startEdit(id) {
-  document.getElementById('view-' + id).style.display = 'none';
-  document.getElementById('edit-' + id).style.display = '';
-  document.querySelector('#edit-' + id + ' input[name="groupName"]').focus();
+  var row = document.getElementById('row-' + id);
+  row.dataset.editing = 'true';
+  var input = row.querySelector('.edit input[name="groupName"]');
+  if (input) input.focus();
 }
 function cancelEdit(id) {
-  document.getElementById('edit-' + id).style.display = 'none';
-  document.getElementById('view-' + id).style.display = '';
+  document.getElementById('row-' + id).dataset.editing = 'false';
 }
 </script>
 

admin/item_groups.php

@@ -66,7 +66,14 @@ show_alerts();
 </form>
 <?php endforeach; ?>
 
-<table class="tbl">
+<table class="tbl tbl-fixed">
+  <colgroup>
+    <col style="width:60px">
+    <col>
+    <col style="width:100px">
+    <col style="width:100px">
+    <col style="width:200px">
+  </colgroup>
   <thead><tr><th>#</th><th>Name</th><th>Sort</th><th>Items</th><th></th></tr></thead>
   <tbody>
   <?php foreach ($groups as $g):
@@ -75,28 +82,30 @@ show_alerts();
     $cnt = $stmt->fetchColumn();
     $id = $g['groupID'];
   ?>
-  <tr id="view-<?= $id ?>">
+  <tr id="row-<?= $id ?>" data-editing="false">
     <td style="color:var(--muted)"><?= $id ?></td>
-    <td><?= htmlspecialchars($g['groupName']) ?></td>
-    <td><?= $g['sortOrder'] ?></td>
-    <td><span class="badge badge-group"><?= $cnt ?></span></td>
-    <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
-      <form method="POST" onsubmit="return confirm('Delete group and ALL its items?')">
-        <input type="hidden" name="action" value="delete">
-        <input type="hidden" name="groupID" value="<?= $id ?>">
-        <button class="btn btn-sm btn-danger">Delete</button>
-      </form>
+    <td>
+      <div class="view"><?= htmlspecialchars($g['groupName']) ?></div>
+      <div class="edit"><input type="text" name="groupName" form="edit-form-<?= $id ?>" value="<?= htmlspecialchars($g['groupName']) ?>" required></div>
+    </td>
+    <td>
+      <div class="view"><?= $g['sortOrder'] ?></div>
+      <div class="edit"><input type="number" name="sortOrder" form="edit-form-<?= $id ?>" value="<?= (int)$g['sortOrder'] ?>" min="0"></div>
     </td>
-  </tr>
-  <tr id="edit-<?= $id ?>" style="display:none;background:rgba(79,209,197,.04);">
-    <td style="color:var(--muted)"><?= $id ?></td>
-    <td><input type="text" name="groupName" form="edit-form-<?= $id ?>" value="<?= htmlspecialchars($g['groupName']) ?>" required style="margin:0;width:100%;"></td>
-    <td><input type="number" name="sortOrder" form="edit-form-<?= $id ?>" value="<?= (int)$g['sortOrder'] ?>" min="0" style="margin:0;width:100%;max-width:80px;"></td>
     <td><span class="badge badge-group"><?= $cnt ?></span></td>
-    <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <button type="submit" form="edit-form-<?= $id ?>" class="btn btn-sm btn-primary">💾 Save</button>
-      <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+    <td>
+      <div class="view actions-buttons">
+        <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
+        <form method="POST" onsubmit="return confirm('Delete group and ALL its items?')">
+          <input type="hidden" name="action" value="delete">
+          <input type="hidden" name="groupID" value="<?= $id ?>">
+          <button class="btn btn-sm btn-danger">Delete</button>
+        </form>
+      </div>
+      <div class="edit actions-buttons">
+        <button type="submit" form="edit-form-<?= $id ?>" class="btn btn-sm btn-primary">💾 Save</button>
+        <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+      </div>
     </td>
   </tr>
   <?php endforeach; ?>
@@ -105,13 +114,13 @@ show_alerts();
 
 <script>
 function startEdit(id) {
-  document.getElementById('view-' + id).style.display = 'none';
-  document.getElementById('edit-' + id).style.display = '';
-  document.querySelector('#edit-' + id + ' input[name="groupName"]').focus();
+  var row = document.getElementById('row-' + id);
+  row.dataset.editing = 'true';
+  var input = row.querySelector('.edit input[name="groupName"]');
+  if (input) input.focus();
 }
 function cancelEdit(id) {
-  document.getElementById('edit-' + id).style.display = 'none';
-  document.getElementById('view-' + id).style.display = '';
+  document.getElementById('row-' + id).dataset.editing = 'false';
 }
 </script>
 

admin/items.php

@@ -83,40 +83,52 @@ show_alerts();
 </form>
 <?php endforeach; ?>
 
-<table class="tbl">
+<table class="tbl tbl-fixed">
+  <colgroup>
+    <col style="width:60px">
+    <col>
+    <col style="width:180px">
+    <col style="width:100px">
+    <col style="width:200px">
+  </colgroup>
   <thead><tr><th>#</th><th>Name</th><th>Group</th><th>Sort</th><th></th></tr></thead>
   <tbody>
   <?php foreach ($items as $item):
     $id = $item['itemID'];
   ?>
-  <tr id="view-<?= $id ?>">
+  <tr id="row-<?= $id ?>" data-editing="false">
     <td style="color:var(--muted)"><?= $id ?></td>
-    <td><?= htmlspecialchars($item['itemName']) ?></td>
-    <td><span class="badge badge-group"><?= htmlspecialchars($item['groupName']) ?></span></td>
-    <td><?= $item['sortOrder'] ?></td>
-    <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
-      <form method="POST" onsubmit="return confirm('Delete this item?')">
-        <input type="hidden" name="action" value="delete">
-        <input type="hidden" name="itemID" value="<?= $id ?>">
-        <button class="btn btn-sm btn-danger">Delete</button>
-      </form>
+    <td>
+      <div class="view"><?= htmlspecialchars($item['itemName']) ?></div>
+      <div class="edit"><input type="text" name="itemName" form="edit-form-<?= $id ?>" value="<?= htmlspecialchars($item['itemName']) ?>" required></div>
+    </td>
+    <td>
+      <div class="view"><span class="badge badge-group"><?= htmlspecialchars($item['groupName']) ?></span></div>
+      <div class="edit">
+        <select name="groupID" form="edit-form-<?= $id ?>" required>
+          <?php foreach ($igroups as $g): ?>
+          <option value="<?= $g['groupID'] ?>" <?= $item['groupID'] == $g['groupID'] ? 'selected' : '' ?>><?= htmlspecialchars($g['groupName']) ?></option>
+          <?php endforeach; ?>
+        </select>
+      </div>
     </td>
-  </tr>
-  <tr id="edit-<?= $id ?>" style="display:none;background:rgba(79,209,197,.04);">
-    <td style="color:var(--muted)"><?= $id ?></td>
-    <td><input type="text" name="itemName" form="edit-form-<?= $id ?>" value="<?= htmlspecialchars($item['itemName']) ?>" required style="margin:0;width:100%;"></td>
     <td>
-      <select name="groupID" form="edit-form-<?= $id ?>" required style="margin:0;width:100%;">
-        <?php foreach ($igroups as $g): ?>
-        <option value="<?= $g['groupID'] ?>" <?= $item['groupID'] == $g['groupID'] ? 'selected' : '' ?>><?= htmlspecialchars($g['groupName']) ?></option>
-        <?php endforeach; ?>
-      </select>
+      <div class="view"><?= $item['sortOrder'] ?></div>
+      <div class="edit"><input type="number" name="sortOrder" form="edit-form-<?= $id ?>" value="<?= (int)$item['sortOrder'] ?>" min="0"></div>
     </td>
-    <td><input type="number" name="sortOrder" form="edit-form-<?= $id ?>" value="<?= (int)$item['sortOrder'] ?>" min="0" style="margin:0;width:100%;max-width:80px;"></td>
-    <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <button type="submit" form="edit-form-<?= $id ?>" class="btn btn-sm btn-primary">💾 Save</button>
-      <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+    <td>
+      <div class="view actions-buttons">
+        <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
+        <form method="POST" onsubmit="return confirm('Delete this item?')">
+          <input type="hidden" name="action" value="delete">
+          <input type="hidden" name="itemID" value="<?= $id ?>">
+          <button class="btn btn-sm btn-danger">Delete</button>
+        </form>
+      </div>
+      <div class="edit actions-buttons">
+        <button type="submit" form="edit-form-<?= $id ?>" class="btn btn-sm btn-primary">💾 Save</button>
+        <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+      </div>
     </td>
   </tr>
   <?php endforeach; ?>
@@ -125,13 +137,13 @@ show_alerts();
 
 <script>
 function startEdit(id) {
-  document.getElementById('view-' + id).style.display = 'none';
-  document.getElementById('edit-' + id).style.display = '';
-  document.querySelector('#edit-' + id + ' input[name="itemName"]').focus();
+  var row = document.getElementById('row-' + id);
+  row.dataset.editing = 'true';
+  var input = row.querySelector('.edit input[name="itemName"]');
+  if (input) input.focus();
 }
 function cancelEdit(id) {
-  document.getElementById('edit-' + id).style.display = 'none';
-  document.getElementById('view-' + id).style.display = '';
+  document.getElementById('row-' + id).dataset.editing = 'false';
 }
 </script>
 

admin/layout.php

@@ -47,6 +47,14 @@ h2{font-size:1rem;font-weight:600;margin-bottom:.75rem;color:var(--text);}
 .tbl th{text-align:left;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.6rem .9rem;border-bottom:1px solid var(--border);}
 .tbl td{padding:.6rem .9rem;border-bottom:1px solid rgba(42,47,63,.6);vertical-align:middle;}
 .tbl tr:hover td{background:rgba(255,255,255,.02);}
+/* Stable-layout table for inline-edit admin pages (opt-in via .tbl-fixed). */
+.tbl-fixed{table-layout:fixed;}
+.tbl-fixed td,.tbl-fixed th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.tbl-fixed tr[data-editing="false"] .edit{display:none;}
+.tbl-fixed tr[data-editing="true"] .view{display:none;}
+.tbl-fixed .edit input,.tbl-fixed .edit select{margin:0;width:100%;}
+.tbl-fixed .actions-buttons{display:flex;gap:.4rem;justify-content:flex-end;}
+.tbl-fixed tr[data-editing="true"]{background:rgba(79,209,197,.04);}
 /* form card */
 .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:1.5rem;}
 label{display:block;font-size:.8rem;font-weight:500;color:var(--muted);margin-bottom:.3rem;letter-spacing:.04em;text-transform:uppercase;}