@orion-studios/payload-studio 0.6.0-beta.142 → 0.6.0-beta.143

package/dist/builder-v2/client.js

@@ -1511,10 +1511,17 @@ var openBuilderHelpPopover = (trigger, wrapper, isOpen) => {
   const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
   const tooltipHalfWidth = 140;
   const viewportGutter = 18;
+  const inspector = trigger.closest(".orion-builder-v2-sidebar, .orion-builder-v2-inspector");
+  const inspectorRect = inspector?.getBoundingClientRect();
+  const leftBoundary = inspectorRect ? Math.max(viewportGutter, inspectorRect.left + 12) : viewportGutter;
+  const rightBoundary = inspectorRect ? Math.min(viewportWidth - viewportGutter, inspectorRect.right - 12) : viewportWidth - viewportGutter;
   const triggerCenter = triggerRect.left + triggerRect.width / 2;
-  if (triggerCenter - tooltipHalfWidth < viewportGutter) {
+  const clampedCenter = Math.min(Math.max(triggerCenter, leftBoundary + tooltipHalfWidth), rightBoundary - tooltipHalfWidth);
+  wrapper.style.setProperty("--builder-v2-help-left", `${clampedCenter}px`);
+  wrapper.style.setProperty("--builder-v2-help-top", `${triggerRect.bottom + 8}px`);
+  if (clampedCenter - tooltipHalfWidth <= leftBoundary) {
     wrapper.classList.add("is-builder-help-left");
-  } else if (triggerCenter + tooltipHalfWidth > viewportWidth - viewportGutter) {
+  } else if (clampedCenter + tooltipHalfWidth >= rightBoundary) {
     wrapper.classList.add("is-builder-help-right");
   } else {
     wrapper.classList.add("is-builder-help-center");

package/dist/builder-v2/client.mjs

@@ -1387,10 +1387,17 @@ var openBuilderHelpPopover = (trigger, wrapper, isOpen) => {
   const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
   const tooltipHalfWidth = 140;
   const viewportGutter = 18;
+  const inspector = trigger.closest(".orion-builder-v2-sidebar, .orion-builder-v2-inspector");
+  const inspectorRect = inspector?.getBoundingClientRect();
+  const leftBoundary = inspectorRect ? Math.max(viewportGutter, inspectorRect.left + 12) : viewportGutter;
+  const rightBoundary = inspectorRect ? Math.min(viewportWidth - viewportGutter, inspectorRect.right - 12) : viewportWidth - viewportGutter;
   const triggerCenter = triggerRect.left + triggerRect.width / 2;
-  if (triggerCenter - tooltipHalfWidth < viewportGutter) {
+  const clampedCenter = Math.min(Math.max(triggerCenter, leftBoundary + tooltipHalfWidth), rightBoundary - tooltipHalfWidth);
+  wrapper.style.setProperty("--builder-v2-help-left", `${clampedCenter}px`);
+  wrapper.style.setProperty("--builder-v2-help-top", `${triggerRect.bottom + 8}px`);
+  if (clampedCenter - tooltipHalfWidth <= leftBoundary) {
     wrapper.classList.add("is-builder-help-left");
-  } else if (triggerCenter + tooltipHalfWidth > viewportWidth - viewportGutter) {
+  } else if (clampedCenter + tooltipHalfWidth >= rightBoundary) {
     wrapper.classList.add("is-builder-help-right");
   } else {
     wrapper.classList.add("is-builder-help-center");

package/dist/builder-v2/styles.css

@@ -1181,32 +1181,49 @@
 }
 
 .orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait {
+  align-items: center;
+  background: #fffdf9;
   border: 1px solid #e4c6b3;
-  border-radius: 8px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  display: flex !important;
+  justify-content: space-between;
   margin-bottom: 8px !important;
   min-height: 54px;
   padding: 10px 12px;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+  width: 100% !important;
 }
 
-.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__wrp {
-  align-items: center !important;
-  display: grid !important;
-  gap: 12px !important;
-  grid-template-columns: minmax(0, 1fr) auto !important;
-  width: 100% !important;
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait:hover {
+  border-color: rgba(181, 111, 77, 0.8);
+  box-shadow: 0 8px 18px rgba(199, 100, 61, 0.1);
 }
 
-.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-label-wrp,
-.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-field-wrp,
-.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__cnt {
-  display: block !important;
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__wrp,
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__cnt,
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-field-wrp {
+  display: contents !important;
+}
+
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-label-wrp {
+  flex: 1 1 auto !important;
   margin: 0 !important;
+  min-width: 0 !important;
+  padding-right: 12px !important;
   width: auto !important;
 }
 
 .orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__label,
 .orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-label {
+  color: var(--builder-v2-ink);
+  font-size: 0.78rem !important;
+  font-weight: 900 !important;
+  line-height: 1.2 !important;
   margin: 0 !important;
+  width: auto !important;
   white-space: normal !important;
 }
 
@@ -1215,6 +1232,7 @@
   border: 0 !important;
   box-shadow: none !important;
   height: auto !important;
+  flex: 0 0 auto !important;
   min-height: 0 !important;
   overflow: visible !important;
   padding: 0 !important;
@@ -1405,7 +1423,6 @@
 .orion-builder-v2-help-trigger::after {
   background: #243654;
   border-radius: 8px;
-  bottom: auto;
   box-shadow: 0 14px 34px rgba(36, 54, 84, 0.22);
   box-sizing: border-box;
   color: #ffffff;
@@ -1413,28 +1430,16 @@
   display: none;
   font-size: 0.72rem;
   font-weight: 700;
-  left: 50%;
   line-height: 1.35;
   max-width: min(260px, 70vw);
   padding: 8px 10px;
-  position: absolute;
+  position: fixed;
   text-transform: none;
-  top: calc(100% + 8px);
+  left: var(--builder-v2-help-left, 50vw);
+  top: var(--builder-v2-help-top, 0);
   transform: translateX(-50%);
   width: max-content;
-  z-index: 20;
-}
-
-.is-builder-help-left > .orion-builder-v2-help-trigger::after {
-  left: 0;
-  right: auto;
-  transform: none;
-}
-
-.is-builder-help-right > .orion-builder-v2-help-trigger::after {
-  left: auto;
-  right: 0;
-  transform: none;
+  z-index: 10000;
 }
 
 .is-builder-help-open > .orion-builder-v2-help-trigger::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.142",
+  "version": "0.6.0-beta.143",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",