@7365admin1/layer-common 4.82.1-staging.477 → 4.82.1-staging.478

package/assets/css/primitives.css

@@ -1176,6 +1176,33 @@ select option {
   }
 }
 
+/* Phones: tables restack into one card per row (Vuetify mobile mode, set in
+   plugins/vuetify.ts), so the 720px grid floor above must not apply. */
+@media (max-width: 599.98px) {
+  .app-table-scroll > * {
+    min-width: 0;
+  }
+
+  .v-data-table__tr--mobile {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .v-data-table__tr--mobile > td {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    column-gap: 12px;
+  }
+
+  .v-data-table__td-title {
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .v-data-table__td-value {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+}
+
 /* ------------------------------------------------------------------ */
 /* Field label (`components/InputLabel.vue`, 125 caller files).        */
 /*                                                                     */

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.82.1-staging.477",
+  "version": "4.82.1-staging.478",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/plugins/vuetify.ts

@@ -114,6 +114,12 @@ export default defineNuxtPlugin((app) => {
 
   const vuetify = createVuetify({
     defaults: {
+      // Phones (owner 2026-10-02, "most pages are not mobile responsive"): below
+      // 600px every data table shows each row as a stacked card (label: value)
+      // instead of a wide grid scrolled sideways. Tablets and desktop unchanged.
+      VDataTable: { mobileBreakpoint: "sm" },
+      VDataTableServer: { mobileBreakpoint: "sm" },
+      VDataTableVirtual: { mobileBreakpoint: "sm" },
       VTextField: {
         variant: "outlined",
         density: "comfortable",