Correct Hub and Engine component geometry

apps/catalog/src/styles.css

@@ -30,20 +30,16 @@ textarea {
   min-height: 100vh;
 }
 
-[data-nodedc-theme="light"] .catalog-app .nodedc-header__brand img {
-  filter: brightness(0.12);
+.catalog-admin-layer {
+  position: fixed;
+  z-index: 390;
+  top: 6.55rem;
+  bottom: 1.25rem;
+  left: 1.25rem;
 }
 
-.catalog-avatar {
-  display: inline-grid;
-  width: 3rem;
-  height: 3rem;
-  place-items: center;
-  border-radius: 999px;
-  background: rgb(var(--nodedc-accent-rgb));
-  color: rgb(var(--nodedc-on-accent-rgb));
-  font-size: 0.72rem;
-  font-weight: 800;
+[data-nodedc-theme="light"] .catalog-app .nodedc-header__brand img {
+  filter: brightness(0.12);
 }
 
 .catalog-main {
@@ -52,6 +48,13 @@ textarea {
   margin: 0 auto;
   gap: 8rem;
   padding: 5rem 0 10rem;
+  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1), margin-left 500ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.catalog-main[data-admin-open="true"] {
+  width: min(1180px, calc(100% - 25rem));
+  margin-right: 1rem;
+  margin-left: 24rem;
 }
 
 .catalog-hero {
@@ -80,6 +83,10 @@ textarea {
   line-height: 1.5;
 }
 
+.catalog-section-nav {
+  margin-top: 0.6rem;
+}
+
 .catalog-section {
   display: grid;
   scroll-margin-top: 2rem;
@@ -205,6 +212,13 @@ textarea {
   gap: 0.75rem;
 }
 
+.catalog-engine-control-stack {
+  display: grid;
+  width: min(var(--nodedc-inspector-inner-width), 100%);
+  justify-self: center;
+  gap: 0.75rem;
+}
+
 .catalog-surface-stack .nodedc-glass {
   min-height: 4rem;
   display: flex;
@@ -227,12 +241,13 @@ textarea {
 
 .catalog-inspector-card {
   width: min(24.375rem, 100%);
+  padding: 1.125rem 0.75rem;
 }
 
 .catalog-inspector-title {
   display: grid;
   gap: 0.3rem;
-  padding: 0.75rem 0.75rem 1rem;
+  padding: 0 0.875rem 0.875rem;
 }
 
 .catalog-inspector-title span {
@@ -246,6 +261,11 @@ textarea {
     padding-top: 2rem;
   }
 
+  .catalog-main[data-admin-open="true"] {
+    width: min(1180px, calc(100% - 2rem));
+    margin-inline: auto;
+  }
+
   .catalog-grid,
   .catalog-grid--foundation {
     grid-template-columns: 1fr;
@@ -258,4 +278,11 @@ textarea {
   .catalog-inspector-stage {
     padding: 1rem;
   }
+
+  .catalog-admin-layer {
+    top: 0.875rem;
+    right: 0.875rem;
+    bottom: 0.875rem;
+    left: 0.875rem;
+  }
 }