@7365admin1/layer-common 4.89.0 → 4.90.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.90.1
+
+### Patch Changes
+
+- 7a207dc: Phones: table cards no longer leave a big gap around each field (the desktop 52px row height and table-card cell padding are dropped below 600px), long values (emails, sync messages) wrap inside the card, and dashboard panels and "No data to display" blocks fit their content instead of a fixed 276px/140px.
+
+## 4.90.0
+
+### Minor Changes
+
+- eb4bce2: Phones: below 600px every data table (`VDataTable`, `VDataTableServer`, `VDataTableVirtual`) shows each row as a stacked card (label: value) instead of a wide grid scrolled sideways, and the 720px `.app-table-scroll` floor no longer applies on phones. Tablets and desktop are unchanged.
+
 ## 4.89.0
 
 ### Minor Changes
@@ -2004,11 +2016,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                  GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                  GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                      GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                      GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                  owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                  staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                      owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                      staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/assets/css/primitives.css

@@ -1119,6 +1119,56 @@ 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);
+  }
+
+  /* One line per field: the desktop row height (52px) and the table-card
+     cell padding (`.table-card tbody td`, !important) made every field of a
+     card a tall block with big gaps (owner 2026-10-02). */
+  .v-data-table .v-table__wrapper > table tbody > tr.v-data-table__tr--mobile > td {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    column-gap: 12px;
+    min-height: 0;
+    height: auto;
+    padding: 4px 16px !important;
+  }
+
+  .v-data-table .v-table__wrapper > table tbody > tr.v-data-table__tr--mobile > td:first-child {
+    padding-top: 12px !important;
+  }
+
+  .v-data-table .v-table__wrapper > table tbody > tr.v-data-table__tr--mobile > td:last-child {
+    padding-bottom: 12px !important;
+  }
+
+  .v-data-table__td-title {
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .v-data-table__td-value {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* Long values (emails, sync messages) wrap inside the card instead of
+     running off it; chips and buttons keep their one-line shape. */
+  .v-data-table__td-value :is(span, div, p, a):not(.v-chip):not(.v-chip *):not(.v-btn):not(.v-btn *) {
+    white-space: normal !important;
+    overflow: visible;
+    text-overflow: clip;
+    max-width: 100%;
+  }
+}
+
 /* ------------------------------------------------------------------ */
 /* Field label (`components/InputLabel.vue`, 125 caller files).        */
 /*                                                                     */

package/components/DashboardEmptyState.vue

@@ -60,4 +60,12 @@ defineProps({
   color: var(--text2);
   max-width: 34ch;
 }
+
+/* Phones (owner 2026-10-02, "big gap"): a fixed-height panel or empty state
+   left a tall blank block under one line of content; fit the content instead. */
+@media (max-width: 599.98px) {
+  .dashboard-empty {
+    min-height: 72px !important;
+  }
+}
 </style>

package/components/DashboardMain.vue

@@ -5149,4 +5149,18 @@ function formatDashboardTime(value?: string) {
   padding: 0;
   white-space: nowrap;
 }
+
+/* Phones (owner 2026-10-02, "big gap"): a fixed-height panel or empty state
+   left a tall blank block under one line of content; fit the content instead. */
+@media (max-width: 599.98px) {
+  .dashboard-panel {
+    height: auto;
+    min-height: 0;
+  }
+
+  .figma-panel {
+    min-height: 0;
+    padding: 18px 18px 16px;
+  }
+}
 </style>

package/components/DashboardPanel.vue

@@ -104,4 +104,14 @@ defineEmits(["action"]);
   margin-top: 20px;
   min-width: 0;
 }
+
+/* Phones (owner 2026-10-02, "big gap"): a fixed-height panel or empty state
+   left a tall blank block under one line of content; fit the content instead. */
+@media (max-width: 599.98px) {
+  .dashboard-panel {
+    height: auto;
+    min-height: 0;
+    padding: 18px 18px 16px;
+  }
+}
 </style>

package/components/VisitorManagement.vue

@@ -77,10 +77,11 @@
             </v-tab>
           </v-tabs>
 
+          <!-- Wraps on narrow screens (was a fixed 60px row: on a phone the
+               "Not Checked Out" label stacked one letter per line). -->
           <v-card
-            class="w-100 px-3 d-flex align-center ga-5 py-2"
+            class="w-100 px-3 d-flex flex-wrap align-center ga-3 py-2 visitor-filters"
             flat
-            :height="60"
           >
             <v-text-field
               v-model="searchInput"
@@ -3159,4 +3160,13 @@ watchEffect(async () => {
   opacity: 0.55;
   cursor: not-allowed;
 }
+
+.visitor-filters > *:not(.v-checkbox) {
+  flex: 1 1 160px;
+  min-width: 150px;
+}
+
+.visitor-filters > .v-checkbox {
+  flex: 0 0 auto;
+}
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.89.0",
+  "version": "4.90.1",
   "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",