@7365admin1/layer-common 3.2.2-staging.178 → 3.2.2-staging.179

package/assets/css/screens.css

@@ -657,6 +657,18 @@
   white-space: nowrap;
 }
 
+/*
+ * `--thead` is intentionally translucent. A fixed header, however, sits above
+ * scrolling rows, so using the token by itself lets the first row show through
+ * the header. Layer the same tint over the card surface to keep the rendered
+ * colour unchanged while making the sticky header fully opaque.
+ */
+.table-card .v-table--fixed-header thead th {
+  background:
+    linear-gradient(var(--thead), var(--thead)),
+    var(--card) !important;
+}
+
 /**
  * ROW HEIGHT IS THE LINE BOX, NOT THE PADDING.
  *

package/components/Layout/NavigationDrawer.vue

@@ -71,7 +71,7 @@
 
       <div class="brand-drawer__names">
         <div class="brand-drawer__app">{{ props.title || APP_NAME }}</div>
-        <div class="brand-drawer__suite">iService 365</div>
+        <div class="brand-drawer__suite">iService365</div>
       </div>
     </div>
 

package/components/SwitchContext.vue

@@ -15,10 +15,14 @@
           :to="props.route"
           class="switch-context__activator"
         >
-          <!-- The design prints the organisation and site names in full.
-               Vuetify's list-item title truncates by default, which cut them
-               to "Property Managem…" / "Seventh Cond…" in the 252px rail. -->
-          <v-list-item-title class="switch-context__name">
+          <!-- The design prints the organisation and site names in full, but
+               mid-word line breaks ("Manageme-nt", "Condominiu-m") are not
+               acceptable. Wrap at word boundaries onto up to two lines, then
+               ellipsis; the title attribute keeps the full name on hover. -->
+          <v-list-item-title
+            class="switch-context__name"
+            :title="name || `Select ${prop.title}`"
+          >
             {{ name || `Select ${prop.title}` }}
           </v-list-item-title>
         </v-list-item>
@@ -250,12 +254,18 @@ const selectItem = (value: string) => {
   background: var(--hover);
 }
 
-/* Wrap onto a second line instead of truncating - the design shows the full
-   organisation and site names. */
+/* Wrap the full organisation/site name at word boundaries onto up to two
+   lines, then ellipsis - never break mid-word. Full name is on the title
+   attribute for hover. */
 .switch-context__name {
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
   white-space: normal;
-  overflow: visible;
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  word-break: normal;
   line-height: 1.25;
 }
 </style>

package/components/TableMain.vue

@@ -173,7 +173,13 @@
           :style="`max-height: calc(100vh - (${offset}px))`"
         >
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
-            <slot :name="slotName" v-bind="slotProps" />
+            <!--
+              Vuetify invokes argument-less slots such as `no-data` with null
+              props. Vue's dynamic `renderSlot` expects an object and otherwise
+              crashes while reading `props.key`, leaving the previous route on
+              screen even though Vue Router has already updated the URL.
+            -->
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
           </template>
 
           <!--

package/package.json

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