@7365admin1/layer-common 4.2.6 → 4.2.7-staging.275

package/components/CameraWall.vue

@@ -165,7 +165,7 @@
           v-else
           class="vms__grid"
           :style="{
-            gridTemplateColumns: `repeat(${layout.columns}, minmax(0, 1fr))`,
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
             gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
           }"
         >
@@ -336,6 +336,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useDisplay } from "vuetify";
 
 import {
   capabilityView,
@@ -348,6 +349,7 @@ import {
   pickerView,
   sharedCapabilityNote,
   wallCameras,
+  wallColumns,
   wallLayout,
   wallPageCount,
   wallRows,
@@ -455,7 +457,17 @@ watch(() => props.site, () => {
 
 const layoutKey = ref<TWallLayoutKey>(DEFAULT_WALL_LAYOUT);
 const layout = computed(() => wallLayout(layoutKey.value));
-const dense = computed(() => isDenseLayout(layoutKey.value));
+
+/**
+ * PHONE OVERRIDE. `smAndDown` is Vuetify's own phone/small-tablet cutoff
+ * (<960px) — the same composable `NavigationDrawer.vue` already reads its
+ * breakpoint from. Below it the wall always draws one column, whatever
+ * layout button is selected; the pure column/dense/row rules live in
+ * `camera-wall.ts` (see `wallColumns`) so they stay testable there.
+ */
+const { smAndDown } = useDisplay();
+const columns = computed(() => wallColumns(layoutKey.value, smAndDown.value));
+const dense = computed(() => isDenseLayout(layoutKey.value, smAndDown.value));
 
 const selectedIds = ref<string[]>([]);
 const showPicker = ref(false);
@@ -479,7 +491,7 @@ const tiles = computed(() =>
  * four empty rectangles. Nothing can be done with an empty cell from here
  * anyway: cameras are added in Site Settings.
  */
-const rows = computed(() => wallRows(tiles.value.length, layoutKey.value));
+const rows = computed(() => wallRows(tiles.value.length, layoutKey.value, smAndDown.value));
 
 /**
  * A layout change resizes the page, so the old page NUMBER no longer means

package/components/ListItem.vue

@@ -13,11 +13,11 @@
 <template>
   <v-list-item :class="props.divider ? border : defaultBorder">
     <v-row>
-      <v-col cols="4" class="app-list-row__label">
+      <v-col cols="12" sm="4" class="app-list-row__label">
         <slot name="title"> List Title </slot>
       </v-col>
 
-      <v-col cols="8" class="app-list-row__value">
+      <v-col cols="12" sm="8" class="app-list-row__value">
         <slot name="value"> value </slot>
       </v-col>
     </v-row>

package/components/VisitorSocketPopUp.vue

@@ -48,7 +48,7 @@
         <v-btn
           rounded="md"
           variant="text"
-          color="primary"
+          color="white"
           class="text-truncate text-decoration-underline px-0"
           @click="goToUnregistered"
         >

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.2.6",
+  "version": "4.2.7-staging.275",
   "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/utils/camera-wall.ts

@@ -101,6 +101,21 @@ export function wallLayout(key: string | undefined) {
   return WALL_LAYOUTS.find((l) => l.key === key) ?? WALL_LAYOUTS[1];
 }
 
+/**
+ * The columns the wall actually draws, after the phone override.
+ *
+ * A phone rendering three columns of a nine-tile wall is the unusable case:
+ * each tile shrinks past the point its status text — or the picture itself —
+ * is legible. So on a phone the wall always draws one column, whatever layout
+ * button is selected; the button still means "this many tiles", it stops
+ * meaning "this many columns" below the phone breakpoint. Tablet and desktop
+ * are untouched — `isPhone` is the caller's own `smAndDown` (or equivalent),
+ * this file has no notion of viewport width itself.
+ */
+export function wallColumns(key: string | undefined, isPhone = false): number {
+  return isPhone ? 1 : wallLayout(key).columns;
+}
+
 /**
  * At three columns a tile is small enough that the chrome starts eating the
  * picture, so the type shrinks and the recorder line loses its timestamp.
@@ -111,9 +126,12 @@ export function wallLayout(key: string | undefined) {
  * from furthest away and the one where a camera is most likely to be missed.
  * Whether a camera is alive is the tile's whole job; it is not the thing that
  * gets cut for room.
+ *
+ * A phone forced to one column (see `wallColumns`) is never dense — a single
+ * full-width tile is the opposite problem.
  */
-export function isDenseLayout(key: string | undefined) {
-  return wallLayout(key).columns >= 3;
+export function isDenseLayout(key: string | undefined, isPhone = false) {
+  return wallColumns(key, isPhone) >= 3;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -302,8 +320,13 @@ export function focusedCamera(
  *
  * Never more rows than the layout would have had, and never fewer than one.
  */
-export function wallRows(count: number, layoutKey: string | undefined): number {
-  const { columns, tiles } = wallLayout(layoutKey);
+export function wallRows(
+  count: number,
+  layoutKey: string | undefined,
+  isPhone = false
+): number {
+  const { tiles } = wallLayout(layoutKey);
+  const columns = wallColumns(layoutKey, isPhone);
   const capped = Math.min(Math.max(0, Math.floor(count)), tiles);
   return Math.min(Math.ceil(tiles / columns), Math.max(1, Math.ceil(capped / columns)));
 }