Replaces the grey slab and filled-box handle with the house card idiom,

a tabler grip and icon-only edit and delete actions. Shows each item's
non-default translations muted below the title, read from the
translation rows rather than the accessor so the fallback chain cannot
disguise a missing label as a translated one.

Adds move up/down buttons via acts_as_list, the single-pointer
alternative WCAG 2.5.7 requires: the jQuery UI sortable binds mouse
events only, so dragging works neither on touch nor from the keyboard.
The grip is hidden below the desktop breakpoint for the same reason.

The sort handler dropped dataType: "json" against a head :ok response,
which sent every success down the error path, and now reloads so the
disabled chevron states match the stored order after a drag.

1 files changed, 123 insertions, 21 deletions

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 49e2362b..1d39dd6c 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -9,7 +9,6 @@
   --hairline:              color-mix(in srgb, CanvasText, Canvas 91%);  /* #e8e8e8 */
   --hairline-faint:        color-mix(in srgb, CanvasText, Canvas 94%);  /* #f1f1f1 */
   --border:                color-mix(in srgb, CanvasText, Canvas 87%);  /* #ddd */
-  --frame-fill:            color-mix(in srgb, CanvasText, Canvas 83%);  /* lightgrey */
   --field-border:          color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 */
   --handle-fill:           color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 as fill */
   --link-underline:        color-mix(in srgb, CanvasText, Canvas 69%);  /* #b0b0b0 */
@@ -1295,11 +1294,15 @@ input#menu_item_title {
    ============================================================ */
 
 #menu_item_list {
-  border-collapse: collapse;
-  padding: 5px 5px 5px 5px;
-  border: solid 5px var(--frame-fill);
-  background-color: var(--frame-fill);
-  border-radius: 5px;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  max-width: 44rem;
+
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+
+  padding: 0.5rem;
 }
 
 #menu_item_list tr:hover {
@@ -1307,33 +1310,132 @@ input#menu_item_title {
 }
 
 #menu_item_list td {
-  height: 20px;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid var(--hairline);
+}
+
+#menu_item_list tr:last-child td {
+  border-bottom: none;
 }
 
 #menu_item_list td.menu_item_title {
-  width: 200px;
+  width: 100%;
+}
+
+.menu_item_translation {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--text-muted);
 }
 
-#menu_item_list td.menu_sort_handle div {
-  background-color: var(--handle-fill);
-  height: 26px;
-  width: 26px;
+.menu_item_translation_locale {
+  font-variant: all-small-caps;
+  letter-spacing: 0.04em;
+  margin-right: 0.35rem;
 }
 
-#menu_item_list td.menu_sort_handle div:before {
-  content: "⇳";
-  font-size: 20px;
-  font-weight: bold;
+.menu_item_translation_absent {
+  font-style: italic;
+}
+
+#menu_item_list td.menu_item_action {
+  width: 1px;
+  white-space: nowrap;
   text-align: center;
-  vertical-align: center;
 }
 
-#menu_item_list td.menu_sort_handle div:hover {
-  cursor: grab;
+#menu_item_list td.menu_item_action a {
+  text-decoration: none;
 }
 
-.ui-state-highlight td {
-  height: 20px;
+#menu_item_list td.menu_item_action svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+}
+
+#menu_item_list td.menu_sort_handle {
+  width: 1px;
+  white-space: nowrap;
+  color: var(--text-muted);
+}
+
+/* jQuery UI sortable binds mouse events, so drag never works on touch.
+   Below the desktop breakpoint the grip would advertise something that
+   cannot happen, and the width is better spent on the chevrons. */
+#menu_item_list .menu_grip {
+  display: none;
+}
+
+@media (min-width: 1016px) {
+  #menu_item_list .menu_grip {
+    display: inline-block;
+    cursor: grab;
+    vertical-align: middle;
+  }
+
+  #menu_item_list td.menu_sort_handle:active .menu_grip {
+    cursor: grabbing;
+  }
+}
+
+#menu_item_list form.menu_move {
+  display: inline-block;
+  margin: 0;
+}
+
+#menu_item_list form.menu_move button[type="submit"] {
+  padding: 0.15rem 0.2rem;
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+#menu_item_list form.menu_move button[type="submit"]:hover {
+  color: var(--text);
+  background-color: var(--surface-tint);
+}
+
+#menu_item_list form.menu_move button[type="submit"]:disabled {
+  opacity: 0.35;
+  cursor: default;
+  background-color: transparent;
+  color: var(--text-muted);
+}
+
+#menu_item_list td.menu_sort_handle svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  vertical-align: middle;
+}
+
+#menu_item_list td.menu_sort_handle:active {
+  cursor: grabbing;
+}
+
+#menu_item_list td.menu_sort_handle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+}
+
+#menu_item_list tr.ui-state-highlight td {
+  height: 2.5rem;
+  background-color: var(--accent-surface);
+  border: 1px dashed var(--accent);
+}
+
+#menu_item_list form.button_to.destructive input[type="submit"],
+#menu_item_list form.button_to.destructive button[type="submit"] {
+  color: var(--danger);
+  background-color: transparent;
+}
+
+#menu_item_list form.button_to.destructive input[type="submit"]:hover,
+#menu_item_list form.button_to.destructive button[type="submit"]:hover {
+  color: var(--on-solid);
+  background-color: var(--danger-solid);
 }
 
 /* ============================================================