@7365admin1/layer-common 4.35.1-staging.411 → 4.35.1-staging.412

package/assets/css/robot-hero.css

@@ -809,8 +809,10 @@
 .hero-detail__main { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 20px; align-items: start; }
 .hero-detail__main--single { grid-template-columns: minmax(0, 1fr); }
 .hero-detail__cam, .hero-detail__map { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
-.hero-detail__main .hero-plan--detail { max-height: 280px; }
-.hero-detail__main--single .hero-plan--detail { max-height: 360px; }
+.hero-detail__top { scroll-margin-top: 72px; }
+.hero-detail__main { --hero-plan-max: 280px; }
+.hero-detail__main--single { --hero-plan-max: 360px; }
+.hero-detail__main .hero-plan--detail { max-height: var(--hero-plan-max); }
 .hero-detail__main .hero-livepanel .hero-dialog__actions:empty { display: none; }
 .hero-detail__commands { border-top: 2px solid var(--hero-divider); padding-top: 10px; }
 .hero-detail__alertcode { color: var(--hero-accent); }

package/components/Robot/Detail.vue

@@ -8,7 +8,7 @@
     runs -> this robot's alerts -> "What this robot can do" folded at the bottom.
     No camera: the map takes the full width. Narrow: camera, map, commands, patrol.
   -->
-  <div>
+  <div ref="topEl" class="hero-detail__top">
     <button type="button" class="hero-back hero-back--sm" @click="emit('back')">‹ {{ backLabel || `${record?.site?.name || "Site"} fleet` }}</button>
     <div class="hero-detail__title hero-detail__title--main">
       <h2>{{ record?.name ?? "Robot" }}</h2>
@@ -332,6 +332,7 @@ const {
 } = useRobots();
 
 const record = ref<Record<string, any> | null>(null);
+const topEl = ref<HTMLElement | null>(null);
 const brands = ref<Array<Record<string, any>>>([]);
 const error = ref("");
 const toast = ref("");
@@ -745,6 +746,8 @@ watch(
     runsLoaded.value = false;
     siteAlerts.value = [];
     await loadRecord();
+    // Open with the robot's header at the top, so camera + map are on screen (the Super Admin page has pickers above).
+    topEl.value?.scrollIntoView?.({ block: "start" });
     loadSchedule();
     loadMaps();
     loadAlerts();

package/components/Robot/FloorPlan.vue

@@ -35,11 +35,11 @@ const props = defineProps<{
   /** That image's width / height, so the plan keeps its shape. */
   aspect?: number | null;
 }>();
-/** The image's own shape; the detail plan's 440 px height cap narrows the width instead of squashing it. */
+/** The image's own shape; the detail plan's height cap (--hero-plan-max, 440 px) narrows the width instead of squashing it. */
 const frameStyle = computed(() => {
   const a = props.image && props.aspect && Number.isFinite(props.aspect) && props.aspect > 0 ? props.aspect : null;
   if (!a) return undefined;
-  return { aspectRatio: String(a), ...(props.detail ? { width: `min(100%, ${Math.round(440 * a)}px)`, maxHeight: "none", marginInline: "auto" } : {}) };
+  return { aspectRatio: String(a), ...(props.detail ? { width: `min(100%, calc(var(--hero-plan-max, 440px) * ${a.toFixed(4)}))`, maxHeight: "none", marginInline: "auto" } : {}) };
 });
 const emit = defineEmits<{ pick: [point: { x: number; y: number }] }>();
 const root = ref<HTMLElement | null>(null);

package/package.json

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