fix(manager): match Mission Core landing geometry

apps/device-manager/src/DeviceManagerApp.tsx

@@ -684,6 +684,9 @@ function DeviceStage({
       && primarySections.some((section) => section.value === value)
       && values.indexOf(value) === index
     ));
+  const hasMedia = overview.background.enabled && overview.background.items.some(
+    (item) => Boolean(mediaSource(item)) && Boolean(item.mediaKind),
+  );
   return (
     <div className="device-manager-stage">
       {error ? (
@@ -694,7 +697,10 @@ function DeviceStage({
         </GlassSurface>
       ) : null}
 
-      <GlassSurface className="device-manager-home" padding="lg" tone="soft">
+      <section
+        className="device-manager-home"
+        data-has-media={hasMedia ? "true" : undefined}
+      >
         <EnvironmentBackdrop background={overview.background} />
         <div className="device-manager-home__scrim" aria-hidden="true" />
         <section className="device-manager-hero">
@@ -715,7 +721,7 @@ function DeviceStage({
             </div>
           ) : null}
         </section>
-      </GlassSurface>
+      </section>
     </div>
   );
 }

apps/device-manager/src/styles.css

@@ -257,46 +257,56 @@ body {
 
 .device-manager-stage {
   height: 100%;
-  overflow: auto;
-  padding: clamp(1rem, 2.5vw, 2.5rem);
-  scrollbar-width: thin;
+  overflow: hidden;
 }
 
 .device-manager-home {
   position: relative;
-  display: flex;
-  min-height: calc(100% - 1px);
-  max-width: 1420px;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
   overflow: hidden;
-  flex-direction: column;
-  justify-content: center;
-  gap: clamp(3rem, 7vh, 6rem);
+  border-radius: var(--nodedc-radius-card);
+  background: var(--nodedc-canvas);
   isolation: isolate;
-  margin: 0 auto;
-  padding: clamp(2.5rem, 6vw, 6rem) !important;
 }
 
 .device-manager-home__media,
 .device-manager-home__scrim {
   position: absolute;
-  z-index: -2;
   inset: 0;
   width: 100%;
   height: 100%;
 }
 
 .device-manager-home__media {
+  z-index: 0;
+  display: block;
   object-fit: cover;
 }
 
 .device-manager-home__scrim {
-  z-index: -1;
-  background: var(--nodedc-overlay-bg);
-  opacity: 0.82;
+  z-index: 1;
+  background:
+    linear-gradient(90deg, rgb(5 6 8 / 0.82) 0%, rgb(5 6 8 / 0.54) 46%, rgb(5 6 8 / 0.24) 100%),
+    linear-gradient(0deg, rgb(5 6 8 / 0.58), transparent 38%);
+  pointer-events: none;
+}
+
+.device-manager-home:not([data-has-media="true"]) .device-manager-home__scrim {
+  background:
+    radial-gradient(circle at 68% 42%, rgb(255 255 255 / 0.035), transparent 34%),
+    linear-gradient(90deg, rgb(5 6 8 / 0.2), transparent 62%);
 }
 
 .device-manager-hero {
-  max-width: 900px;
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: clamp(2rem, 5vw, 6rem);
+  width: min(39rem, 50%);
+  transform: translateY(-55%);
 }
 
 .device-manager-hero__icon {
@@ -316,27 +326,33 @@ body {
 }
 
 .device-manager-hero h1 {
-  margin: 0.7rem 0 0.9rem;
+  margin: 0.75rem 0 1rem;
   color: var(--nodedc-text-primary);
-  font-size: clamp(4rem, 8vw, 8.5rem);
-  font-weight: 520;
-  letter-spacing: -0.065em;
-  line-height: 0.9;
+  font-size: clamp(3rem, 7vw, 7.6rem);
+  font-weight: 600;
+  letter-spacing: -0.072em;
+  line-height: 0.87;
 }
 
 .device-manager-hero p {
-  max-width: 680px;
+  max-width: 34rem;
   margin: 0;
   color: var(--nodedc-text-secondary);
-  font-size: clamp(0.96rem, 1.4vw, 1.14rem);
-  line-height: 1.55;
+  font-size: clamp(0.8rem, 1vw, 1rem);
+  line-height: 1.6;
 }
 
 .device-manager-hero__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
+  gap: 0.65rem;
+  margin-top: 1.6rem;
+}
+
+@media (max-width: 1480px) {
+  .device-manager-hero {
+    width: min(35rem, 54%);
+  }
 }
 
 .environment-settings {
@@ -948,20 +964,36 @@ body {
   gap: 1rem;
 }
 
+@media (max-height: 720px) and (min-width: 761px) {
+  .device-manager-hero h1 {
+    font-size: clamp(2.7rem, 6vw, 5rem);
+  }
+
+  .device-manager-hero p {
+    font-size: 0.76rem;
+  }
+
+  .device-manager-hero__actions {
+    margin-top: 1rem;
+  }
+}
+
 @media (max-width: 760px) {
   body { overflow: auto; }
 
   .device-manager-stage {
-    padding: 1rem;
+    overflow: hidden;
   }
 
-  .device-manager-home {
-    min-height: auto;
-    padding: 2.5rem 1.25rem !important;
+  .device-manager-hero {
+    top: 42%;
+    right: 1.2rem;
+    left: 1.2rem;
+    width: auto;
   }
 
   .device-manager-hero h1 {
-    font-size: clamp(3.4rem, 17vw, 6rem);
+    font-size: clamp(2.8rem, 14vw, 5rem);
   }
 
   .device-manager-panel-toolbar,