@7365admin1/layer-common 4.64.4 → 4.65.1

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @iservice365/layer-common
 
+## 4.65.1
+
+### Patch Changes
+
+- 5df1751: Signed-in QA sweep fixes (plain words and readable controls):
+  - Inventory Settings names every property it supplies (was "Current property" when the organisation's site list did not include it).
+  - Inventory item lines label the packing ("Code 001 · Bulb · Packing: 25") instead of a bare number.
+  - Dashboard Low Stock tile shows 0 and "Every item is above its alert level" instead of "No data to display".
+  - Dashboard activity chart y-axis shows distinct whole numbers (was "0 0 0 1 1 1"); the Customize entry is called "Activity chart" and describes what it draws.
+  - A plain on/off switch now has a visible off track in light mode.
+  - Bell panel title "Notifications"; notification settings say "iService365"; the robot mini-map no longer shows "(placeholder)".
+
+## 4.65.0
+
+### Minor Changes
+
+- 2d6671a: Excel templates made live from the property: every import (inventory items, receive stock, building units, areas, units, vehicles, cameras) downloads a template with dropdowns, an example row and an Instructions sheet, and the server-checked imports show every row before saving and save nothing while a row needs fixing. Add Item records opening stock like a delivery (date, supplier, PO no., received by).
+
+### Patch Changes
+
+- d7302ad: Make the access card screens use the site's own Entrypass URL. Add Access
+  Card, the card preview dialog and Assign to Unit all called
+  `/api/encrypt-acm-url` with no `url`, so their door/lift levels, access
+  groups and card assignments went to the route's hardcoded default host
+  whatever the site had configured under Entry Pass settings. Only the
+  contractor pass in `VisitorForm` honoured the setting. A new
+  `useSiteEntryPassSettings().getEncryptedAcmUrl(siteId)` resolves the site's
+  URL first and falls back to the default when none is set or the settings
+  cannot be read; the three screens now call it.
+- 955c89c: Let the entry pass card picker be searched and paged. The "Select Cards"
+  field was a `v-select` over the first 100 available cards, which only let
+  the operator scroll. It is now a `v-autocomplete`: typing narrows the list
+  at once and, after a 500ms debounce, sends the term to the available-cards
+  endpoint as `search`; reaching the end of the list fetches the next page and
+  appends it. Responses that arrive after a newer request are dropped, so a slow
+  search cannot overwrite a fast one and a late page cannot be appended onto a
+  list that was replaced. API-core does not read `search` yet; until it does,
+  Vuetify's client-side match on `cardNo` is what narrows the list.
+- b80bfdf: Print the entry pass with one large QR code instead of five. The pass carried
+  four small copies at the corners around a centre one so a strip could be cut
+  apart; the small copies were downscaled from the centre render and scanned
+  poorly on thermal paper. `createReceiptLayout` now draws a single 350px QR,
+  generated at the size it is printed, in the same band above the company name.
+  The `QrTemplatePreview` dialog shows the same single 260px QR so the preview
+  matches what comes out of the printer.
+
 ## 4.64.4
 
 ### Patch Changes
@@ -1721,11 +1767,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

@@ -939,6 +939,19 @@ select option {
   background: var(--accent);
 }
 
+/*
+ * A plain `v-switch` (no `.app-switch`). Vuetify paints its OFF track with the
+ * theme's surface-variant, which this theme sets to near-white (251,251,248),
+ * so on a white card an off switch showed only its thumb and did not read as
+ * a switch at all (Inventory > Settings, Site Settings, Online Forms...). Give
+ * the off track a visible tint in both themes; when ON, Vuetify's `bg-*`
+ * colour class (`!important`) still wins, so the checked colour is unchanged.
+ */
+.v-switch:not(.app-switch) .v-switch__track {
+  background-color: rgba(var(--v-theme-on-surface), 0.26);
+  opacity: 1;
+}
+
 .app-switch .v-selection-control__input {
   position: absolute;
   inset: 0;

package/components/AccessCardAddForm.vue

@@ -433,7 +433,10 @@ const {
   bulkPhysicalAccessCard: _bulkPhysicalAccessCard,
   getBlockLevelUnitList: _getBlockLevelUnitList,
 } = useAccessManagement();
-const { getBySiteId: _getEntryPassSettings } = useSiteEntryPassSettings();
+const {
+  getBySiteId: _getEntryPassSettings,
+  getEncryptedAcmUrl: _getEncryptedAcmUrl,
+} = useSiteEntryPassSettings();
 const { getFileUrl } = useFile();
 
 const config = useRuntimeConfig();
@@ -588,9 +591,7 @@ watch(uploadMode, (mode) => {
 
 onMounted(async () => {
   try {
-    const { encrypted: acmUrl } = await $fetch<{ encrypted: string }>(
-      "/api/encrypt-acm-url"
-    );
+    const acmUrl = await _getEncryptedAcmUrl(siteId);
     encryptedAcmUrl.value = acmUrl;
     const [doorLevels, liftLevels, groups] = await Promise.all([
       _getDoorAccessLevels(acmUrl),

package/components/AccessCardAssignToUnitForm.vue

@@ -203,6 +203,7 @@ const {
   getBlockLevelUnitList: _getBlockLevelUnitList,
 } = useAccessManagement();
 const { requiredRule } = useUtils();
+const { getEncryptedAcmUrl } = useSiteEntryPassSettings();
 
 const route = useRoute();
 const siteId = computed(() => props.siteId || (route.params.site as string));
@@ -294,7 +295,7 @@ onMounted(async () => {
 
   const [blockLevelResult, acmResult] = await Promise.allSettled([
     _getBlockLevelUnitList(siteId.value),
-    $fetch<{ encrypted: string }>("/api/encrypt-acm-url"),
+    getEncryptedAcmUrl(siteId.value),
   ]);
 
   // Blocks / Levels / Units
@@ -309,7 +310,7 @@ onMounted(async () => {
 
   // ACM levels (door + lift)
   if (acmResult.status === "fulfilled") {
-    const acmUrl = acmResult.value.encrypted;
+    const acmUrl = acmResult.value;
     try {
       const [doorLevels, liftLevels] = await Promise.all([
         _getDoorAccessLevels(acmUrl),

package/components/AccessCardPreviewDialog.vue

@@ -403,6 +403,7 @@ const emit = defineEmits<{
 }>();
 
 const { getResidents, assignUser } = useAccessManagement();
+const { getEncryptedAcmUrl } = useSiteEntryPassSettings();
 
 const historyDialog = ref(false);
 const showAssignForm = ref(false);
@@ -475,12 +476,12 @@ async function openAssignForm() {
   if (!props.unit?._id || !props.orgId || !props.siteId) return;
   peopleLoading.value = true;
   try {
-    const [residentsRes, acmRes] = await Promise.all([
+    const [residentsRes, acmUrl] = await Promise.all([
       getResidents({ orgId: props.orgId, siteId: props.siteId, unitId: props.unit._id }),
-      $fetch<{ encrypted: string }>("/api/encrypt-acm-url"),
+      getEncryptedAcmUrl(props.siteId),
     ]);
     peopleItems.value = residentsRes?.data ?? [];
-    encryptedAcmUrl.value = acmRes?.encrypted ?? "";
+    encryptedAcmUrl.value = acmUrl ?? "";
   } catch {
     peopleItems.value = [];
   } finally {

package/components/AreaMain.vue

@@ -64,9 +64,8 @@
                       v-bind="t"
                       class="ma-1 screen-icon-btn"
                       variant="flat"
-                      href="/files/area-sample-data.xlsx"
-                      target="_blank"
-                      download
+                      :loading="templateDownloading"
+                      @click="downloadLiveTemplate"
                     >
                       <v-icon>mdi-download</v-icon>
                     </v-btn>
@@ -310,16 +309,25 @@
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
-  <input
-    ref="fileInput"
-    type="file"
-    accept=".csv,.xlsx,.xls"
-    style="display: none"
-    @change="onFileSelected"
+  <ImportExcelDialog
+    v-model="showImport"
+    title="Import Areas from Excel"
+    noun="areas"
+    name-label="Area"
+    fill-hint="One area per row: its name, Type (Common or Toilet, from the dropdown), Set and the units to check, separated by commas."
+    duplicate-note="Areas already on the list (same name and type) are skipped and left unchanged."
+    template-file-name="areas-import-template.xlsx"
+    :download-template="() => downloadTemplate('areas', importQuery)"
+    :check="(file: File) => checkImport('areas', file, importQuery)"
+    :commit="(file: File) => commitImport('areas', file, importQuery)"
+    @done="getTaskRefresh()"
+    @error="(text: string) => showMessage(text, 'error')"
   />
 </template>
 
 <script setup lang="ts">
+import useImportTemplates from "../composables/useImportTemplates";
+import { saveBlob } from "../composables/useInventory";
 import QrcodeVue from "qrcode.vue";
 import useAreas from "../composables/useAreas";
 import useUnits from "../composables/useUnits";
@@ -406,7 +414,6 @@ const {
   createArea,
   updateArea,
   deleteArea,
-  uploadAreas,
   getAreaById,
   exportAreas,
 } = useAreas();
@@ -461,7 +468,6 @@ const selectedItem = ref<Record<string, any> | null>(null);
 const message = ref("");
 const messageSnackbar = ref(false);
 const messageColor = ref("");
-const fileInput = ref<HTMLInputElement | null>(null);
 
 const dialogShowMoreActions = ref(false);
 const dialogShowForm = ref(false);
@@ -573,29 +579,26 @@ async function handleDownloadExcel() {
 }
 
 function onImportData() {
-  fileInput.value?.click();
+  showImport.value = true;
 }
 
-async function onFileSelected(event: Event) {
-  const target = event.target as HTMLInputElement;
-  const file = target.files?.[0];
-
-  if (!file) return;
-
-    try {
-      submitting.value = true;
-      const response = await uploadAreas(file, props.site, props.serviceType);
-      showMessage(response?.message, "success");
-
-      await getTaskRefresh();
-    } catch (err: any) {
-      showMessage(err?.data?.message, "error");
-    } finally {
-      submitting.value = false;
-      if (target) target.value = "";
-    }
+// The template is made live from this property's own data (dropdowns, instructions, the property named inside).
+const { downloadTemplate, checkImport, commitImport } = useImportTemplates();
+const importQuery = computed(() => ({ site: String(props.site ?? ""), serviceType: props.serviceType || undefined }));
+const showImport = ref(false);
+const templateDownloading = ref(false);
+async function downloadLiveTemplate() {
+  templateDownloading.value = true;
+  try {
+    saveBlob(await downloadTemplate("areas", importQuery.value), "areas-import-template.xlsx");
+  } catch (error: any) {
+    showMessage(error?.data?.message || "Could not download the template.", "error");
+  } finally {
+    templateDownloading.value = false;
+  }
 }
 
+
 function onCreateItem() {
   dialogMode.value = "add";
   editingItem.value = {};

package/components/BuildingManagement/units.vue

@@ -25,8 +25,21 @@
           </AppButton>
         </template>
       </PageHeader>
-      <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
-        @change="handleBulkUploadFileChange" />
+      <!-- Check-then-save import: every row shown with its row number and reason before anything is saved. -->
+      <ImportExcelDialog
+        v-model="showImport"
+        title="Import Blocks, Levels and Units from Excel"
+        noun="rows"
+        name-label="Building / Level / Unit"
+        fill-hint="One row per unit: block number, building name, level and unit. Building Name and Level have dropdowns with this property's own values."
+        duplicate-note="Units already on that level are skipped and left unchanged."
+        template-file-name="units-import-template.xlsx"
+        :download-template="() => downloadTemplate('building-units', { site })"
+        :check="(file: File) => checkImport('building-units', file, { site })"
+        :commit="(file: File) => commitImport('building-units', file, { site })"
+        @done="getBuildingUnit()"
+        @error="(text: string) => showMessage(text, 'error')"
+      />
     </v-col>
 
     <!-- Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`. -->
@@ -160,6 +173,8 @@
 </template>
 
 <script setup lang="ts">
+import useImportTemplates from "../../composables/useImportTemplates";
+import { saveBlob } from "../../composables/useInventory";
 import { useDisplay } from 'vuetify/lib/composables/display.mjs';
 
 const props = defineProps({
@@ -339,28 +354,20 @@ async function handleDeleteBuildingUnit() {
   }
 }
 
-function openBulkUploadFilePicker() {
-  if (bulkUploadLoading.value) {
-    return;
-  }
+// The template is made live from this property's data; the import checks every row before saving.
+const { downloadTemplate, checkImport, commitImport } = useImportTemplates();
+const showImport = ref(false);
 
-  bulkUploadFile.value = null;
-  bulkUploadSkippedErrors.value = [];
-  bulkUploadSkippedSummary.value = [];
-  bulkUploadSkippedDialog.value = false;
-  if (bulkUploadFileInput.value) {
-    bulkUploadFileInput.value.value = "";
-    bulkUploadFileInput.value.click();
-  }
+function openBulkUploadFilePicker() {
+  showImport.value = true;
 }
 
-function downloadBulkUploadTemplate() {
-  const link = document.createElement("a");
-  link.href = "/files/Bulk-Upload-Unit-Template.xlsx";
-  link.download = "Bulk-Upload-Unit-Template.xlsx";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
+async function downloadBulkUploadTemplate() {
+  try {
+    saveBlob(await downloadTemplate("building-units", { site }), "units-import-template.xlsx");
+  } catch (error: any) {
+    showMessage(error?.data?.message || "Could not download the template.", "error");
+  }
 }
 
 function formatSkippedSummaryReason(item: Record<string, any>) {
@@ -413,6 +420,8 @@ function getBulkUploadSkippedSummary(result: Record<string, any> | null | undefi
   return [];
 }
 
+// ponytail: the old direct upload (this handler and the skipped-rows dialog) is no longer reachable —
+// Bulk Upload opens ImportExcelDialog. Delete it once the new import is confirmed in production.
 async function handleBulkUploadFileChange(event: Event) {
   const input = event.target as HTMLInputElement;
   const file = input.files?.[0] ?? null;

package/components/CameraBulkImportDialog.vue

@@ -6,7 +6,7 @@
       <!-- Step 1 — the file. -->
       <template v-if="!results.length">
         <p class="text-body-2 mb-4">
-          Upload the camera survey sheet as a CSV file. Each row is one camera:
+          Upload the camera survey sheet (the Excel template, or a CSV). Each row is one camera:
           its name, the recorder it is on, and its channel number on that
           recorder. The live-view address is worked out for you — do not type
           one.
@@ -14,12 +14,12 @@
 
         <v-file-input
           v-model="file"
-          accept=".csv,text/csv"
+          accept=".xlsx,.csv,text/csv"
           density="comfortable"
           variant="outlined"
           prepend-icon=""
           prepend-inner-icon="mdi-file-delimited-outline"
-          label="Camera survey sheet (.csv)"
+          label="Camera survey sheet (.xlsx or .csv)"
           :disabled="busy"
           @update:model-value="readFile"
         />
@@ -147,6 +147,9 @@
 <script setup lang="ts">
 import useSiteSettings from "../composables/useSiteSettings";
 import { cameraCsvTemplate, parseCameraCsv } from "../utils/camera-csv";
+import { isExampleLine, isWorkbookName, templateRefusal, xlsxMeta, xlsxToGrid } from "../utils/vehicle-bulk-sheet";
+import useImportTemplates from "../composables/useImportTemplates";
+import { saveBlob } from "../composables/useInventory";
 
 /**
  * Adding a site's cameras from the technician's survey sheet.
@@ -177,6 +180,7 @@ const prop = defineProps({
 const emit = defineEmits(["cancel", "imported"]);
 
 const { bulkImportSiteCameras } = useSiteSettings();
+const { downloadTemplate: downloadLiveTemplate } = useImportTemplates();
 
 const file = ref<File | File[] | null>(null);
 const fileError = ref("");
@@ -240,14 +244,22 @@ function close() {
   emit("cancel");
 }
 
-function downloadTemplate() {
-  const blob = new Blob([cameraCsvTemplate()], { type: "text/csv" });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = "camera-survey-sheet.csv";
-  link.click();
-  URL.revokeObjectURL(url);
+/** The Excel template (Yes/No dropdowns, an example row, an Instructions sheet); the CSV headings if it cannot be made. */
+async function downloadTemplate() {
+  try {
+    saveBlob(await downloadLiveTemplate("cameras", { site: prop.site }), "camera-survey-sheet.xlsx");
+  } catch {
+    saveBlob(new Blob([cameraCsvTemplate()], { type: "text/csv" }), "camera-survey-sheet.csv");
+  }
+}
+
+/** A filled-in Excel template, as the CSV text the survey-sheet reader takes; the example row left out. */
+function gridToCsv(grid: string[][]) {
+  const quote = (v: string) => (/[",\r\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v);
+  return grid
+    .filter((line) => !isExampleLine(line))
+    .map((line) => line.map((cell) => quote(String(cell ?? ""))).join(","))
+    .join("\n");
 }
 
 /** What the sheet carries that a camera record has no field for. */
@@ -264,7 +276,24 @@ async function readFile(selected: File | File[] | null) {
   const chosen = Array.isArray(selected) ? selected[0] : selected;
   if (!chosen) return;
 
-  const parsed = parseCameraCsv(await chosen.text());
+  let text: string;
+  if (isWorkbookName(chosen.name)) {
+    const workbook = await chosen.arrayBuffer();
+    const refusal = templateRefusal(await xlsxMeta(workbook), { kind: "cameras", site: prop.site });
+    if (refusal) {
+      fileError.value = refusal;
+      return;
+    }
+    try {
+      text = gridToCsv(await xlsxToGrid(workbook));
+    } catch {
+      fileError.value = "This file could not be read. Save it as Excel (.xlsx) from the template and try again.";
+      return;
+    }
+  } else {
+    text = await chosen.text();
+  }
+  const parsed = parseCameraCsv(text);
 
   if (parsed.missingColumns.length) {
     fileError.value = `This file is missing: ${parsed.missingColumns.join(", ")}. Download the blank sheet to see the columns it needs.`;

package/components/DashboardMain.vue

@@ -31,7 +31,9 @@
               <span class="text-blue-grey">Balance: {{ item.qty }}</span>
             </div>
           </div>
-          <div v-else class="print-kpi-meta mt-2">No supplies recorded</div>
+          <div v-else class="print-kpi-meta mt-2">
+            {{ card.raw?.basis === "below-alert-level" ? "0 · every item is above its alert level" : "No supplies recorded" }}
+          </div>
         </template>
         <template v-else>
           <div class="print-kpi-value">{{ card.value }}</div>
@@ -401,6 +403,11 @@
                 <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
             </div>
+            <!-- Nothing low: say so with the number, not "No data" - that reads as "not set up". -->
+            <div v-else-if="card.raw?.basis === 'below-alert-level'" class="d-flex flex-column">
+              <span class="text-h5 font-weight-bold text-high-emphasis">0</span>
+              <span class="text-body-2 text-medium-emphasis">Every item is above its alert level</span>
+            </div>
             <DashboardEmptyState v-else compact />
           </template>
         </AppKpiTile>
@@ -1230,7 +1237,7 @@ import type { CookieOptions } from "#app";
 // Explicitly, not by auto-import: every other component in this layer reaches
 // its utils by relative path (`StatusChip.vue`, `CameraWall.vue`,
 // `plugins/vuetify.ts`), and a bare call resolved to nothing when driven.
-import { buildWorkOrderStatus } from "../utils/dashboard";
+import { buildWorkOrderStatus, chartTopValue } from "../utils/dashboard";
 import { permissionsDenied } from "../utils/module-routes";
 import { grantsPermission } from "../utils/permission-spellings";
 import { workerTerm, workerTitle } from "../utils/worker-terms";
@@ -2155,8 +2162,8 @@ const customizeWidgets = computed(() => {
       },
       {
         key: "activity",
-        title: "This Week Activity (Line Chart)",
-        description: "Compare incidents and work orders over time.",
+        title: "Activity chart",
+        description: "Work orders opened and closed over the chosen period.",
       },
       {
         key: "upcomingEvents",
@@ -2217,8 +2224,8 @@ const customizeWidgets = computed(() => {
       },
       {
         key: "activity",
-        title: "This Week Activity (Line Chart)",
-        description: "Compare incidents and work orders over time.",
+        title: "Activity chart",
+        description: "Work orders opened and closed over the chosen period.",
       },
       {
         key: "activePatrol",
@@ -2714,7 +2721,7 @@ const secondarySeries = computed(() =>
 const primaryLegendLabel = computed(() => activityChart.value.primaryLabel);
 const secondaryLegendLabel = computed(() => activityChart.value.secondaryLabel);
 const chartMax = computed(() =>
-  Math.max(1, ...primarySeries.value, ...secondarySeries.value)
+  chartTopValue([...primarySeries.value, ...secondarySeries.value])
 );
 const hasChartData = computed(
   () => primarySeries.value.some(Boolean) || secondarySeries.value.some(Boolean)

package/components/EntryPass/QrTemplatePreview.vue

@@ -32,28 +32,18 @@
             </v-col>
 
             <v-col cols="12" class="mt-5">
-              <!-- UPPER QR -->
-              <v-row no-gutters>
-                <v-col cols="6">
-                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
-                </v-col>
-                <v-col cols="6">
-                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
-                </v-col>
-              </v-row>
-
-              <!-- CENTER QR -->
-              <img v-if="qrLarge" :src="qrLarge" width="130" height="130" class="my-2" />
-
-              <!-- LOWER QR -->
-              <v-row no-gutters>
-                <v-col cols="6">
-                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
-                </v-col>
-                <v-col cols="6">
-                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
-                </v-col>
-              </v-row>
+              <!-- The pass used to print five QRs - four 80px copies at the
+                   corners around a 130px centre one - so a strip could be cut
+                   apart. It now carries a single large QR, matching what
+                   `createReceiptLayout` sends to the thermal printer. -->
+              <img
+                v-if="qrLarge"
+                :src="qrLarge"
+                width="260"
+                height="260"
+                class="qr-preview__code my-2"
+                alt="Entry pass QR code"
+              />
             </v-col>
 
             <v-col cols="12" class="mt-5">
@@ -90,12 +80,11 @@ defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const qrSmall = ref<string>("");
 const qrLarge = ref<string>("");
 
 onMounted(async () => {
-  qrSmall.value = await QRCode.toDataURL("123123", { width: 80, margin: 1 });
-  qrLarge.value = await QRCode.toDataURL("123123", { width: 130, margin: 1 });
+  // Rendered at the size it is displayed at, so the modules stay crisp.
+  qrLarge.value = await QRCode.toDataURL("123123", { width: 260, margin: 1 });
 });
 
 const now = new Date();
@@ -112,4 +101,11 @@ const timeStr = now.toLocaleTimeString();
   font-weight: var(--fw-card-title);
   color: var(--text);
 }
+
+/* The dialog is 550px wide but narrows on small screens, so the QR is capped
+   at its own width rather than a fixed 260px that would overflow the card. */
+.qr-preview__code {
+  max-width: 100%;
+  height: auto;
+}
 </style>