@7365admin1/layer-common 4.90.2-staging.483 → 4.90.2-staging.484

package/assets/css/robot-hero.css

@@ -324,6 +324,9 @@
 }
 /* The site fleet's strip: always six columns (README §2). */
 .hero-summary--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+/* Phones (owner 2026-10-02): six cells in one row cut every label ("TOTA",
+   "ONL"); three per row keeps each label whole. */
+@media (max-width: 599.98px) { .hero-summary--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
 .hero-cell {
   --hero-cell-color: var(--hero-text);
   position: relative;

package/components/ClientMain.vue

@@ -141,17 +141,17 @@
                   before, and which is the one thing the admin app's
                   Organizations list showed that this one did not.
                 -->
-                <td class="td-name">
+                <td class="td-name" data-label="Organization">
                   {{ item.name }}
                   <span class="td-name-sub">{{ item.email }}</span>
                 </td>
                 <!-- A blank cell reads as a broken screen, so the one case
                      with nothing to print says so. `--text2`, not `--muted`:
                      this is text to be read, and `--muted` measures 3.24:1. -->
-                <td :class="{ 'td-nature-none': !item.nature }">
+                <td data-label="Nature" :class="{ 'td-nature-none': !item.nature }">
                   {{ item.nature ? formatNature(item.nature) : 'Not recorded' }}
                 </td>
-                <td>
+                <td data-label="Sites">
                   <span class="sites-badge">{{ item.sites }}</span>
                 </td>
                 <!--
@@ -159,7 +159,7 @@
                   which reads as a broken screen. It is one ordinary state, so it
                   is said once, in words.
                 -->
-                <td v-if="item.sub.state === 'none'" colspan="4" class="sub-none">
+                <td v-if="item.sub.state === 'none'" colspan="4" class="sub-none" data-label="Subscription">
                   No subscription set up
                   <button class="sub-setup-btn" @click="openSubscription(item)">
                     Set up subscription
@@ -167,13 +167,13 @@
                 </td>
 
                 <template v-else>
-                  <td>
+                  <td data-label="Subscription">
                     <span class="sub-label" :class="{ 'needs-attention': item.sub.needsAttention }">
                       {{ item.sub.label }}
                     </span>
                   </td>
-                  <td class="td-muted">{{ item.sub.billingCycle }}</td>
-                  <td>
+                  <td class="td-muted" data-label="Billing cycle">{{ item.sub.billingCycle }}</td>
+                  <td data-label="Start date">
                     <span class="date-cell">
                       <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
                         <rect x="1" y="3" width="14" height="12" rx="2" stroke="#9CA3AF" stroke-width="1.3"/>
@@ -183,7 +183,7 @@
                       {{ item.sub.start }}
                     </span>
                   </td>
-                  <td>
+                  <td data-label="End date">
                     <span class="date-cell" :class="{ 'needs-attention': item.sub.needsAttention }">
                       <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
                         <rect x="1" y="3" width="14" height="12" rx="2" stroke="#9CA3AF" stroke-width="1.3"/>
@@ -194,7 +194,7 @@
                     </span>
                   </td>
                 </template>
-                <td>
+                <td data-label="Actions">
                   <div class="action-wrap">
                     <button class="dots-btn" @click.stop="toggleMenu(item._id, $event)">
                       <span /><span /><span />
@@ -223,11 +223,11 @@
                 <td colspan="5" class="empty">No pending invitations.</td>
               </tr>
               <tr v-for="item in items" :key="item._id">
-                <td class="td-muted">{{ item.email }}</td>
-                <td>{{ item.app }}</td>
-                <td class="td-muted">{{ item.role }}</td>
-                <td><span class="status-chip pending">{{ item.status }}</span></td>
-                <td>
+                <td class="td-muted" data-label="Email">{{ item.email }}</td>
+                <td data-label="App">{{ item.app }}</td>
+                <td class="td-muted" data-label="Role">{{ item.role }}</td>
+                <td data-label="Status"><span class="status-chip pending">{{ item.status }}</span></td>
+                <td data-label="Action">
                   <button
                     class="cancel-btn"
                     :disabled="cancelLoadingId === item._id"
@@ -1314,4 +1314,46 @@ tbody td { vertical-align: middle; }
   background: var(--err-bg);
   color: var(--err);
 }
+
+/* Phones (owner 2026-10-02): the client table was 1085px wide inside a 390px
+   screen. Below 600px each client is a card, one "label: value" line per cell. */
+@media (max-width: 599.98px) {
+  .table-scroll table,
+  .table-scroll tbody,
+  .table-scroll tr,
+  .table-scroll td {
+    display: block;
+    width: 100%;
+  }
+
+  .table-scroll thead {
+    display: none;
+  }
+
+  .table-scroll tr {
+    border-bottom: 1px solid var(--border);
+    padding: 8px 0;
+  }
+
+  .table-scroll td {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    column-gap: 12px;
+    align-items: center;
+    padding: 4px 16px !important;
+    border: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .table-scroll td[data-label]::before {
+    content: attr(data-label);
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .table-scroll td.empty {
+    display: block;
+  }
+}
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.90.2-staging.483",
+  "version": "4.90.2-staging.484",
   "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.",