Fix some crashes and improve pixel alignment

packages/client/src/components/preview/Indicator.svelte

@@ -69,7 +69,7 @@
     z-index: var(--zIndex);
     border: 2px solid var(--color);
     pointer-events: none;
-    border-radius: 4px;
+    border-radius: 2px;
   }
   .indicator.withText {
     border-top-left-radius: 0;

packages/client/src/components/preview/IndicatorSet.svelte

@@ -37,7 +37,6 @@
   let callbackCount = 0
 
   $: visibleIndicators = state.indicators.filter(x => x.visible)
-  $: offset = $builderStore.inBuilder ? 0 : 2
 
   // Update position when any props change
   $: config.set({
@@ -150,10 +149,10 @@
 
       const elBounds = child.getBoundingClientRect()
       nextState.indicators.push({
-        top: elBounds.top + scrollY - deviceBounds.top - offset,
-        left: elBounds.left + scrollX - deviceBounds.left - offset,
-        width: elBounds.width + 4,
-        height: elBounds.height + 4,
+        top: Math.round(elBounds.top + scrollY - deviceBounds.top + 1),
+        left: Math.round(elBounds.left + scrollX - deviceBounds.left + 1),
+        width: Math.round(elBounds.width + 2),
+        height: Math.round(elBounds.height + 2),
         visible: false,
         insideSidePanel: !!child.closest(".side-panel"),
         insideModal: !!child.closest(".modal-content"),

packages/client/src/utils/grid.js

@@ -77,8 +77,8 @@ const alignmentToStyleMap = {
   stretch: "stretch",
 }
 export const getBaseGridVars = definition => {
-  const gridHAlign = definition.grid?.hAlign || "stretch"
-  const gridVAlign = definition.grid?.vAlign || "center"
+  const gridHAlign = definition?.grid?.hAlign || "stretch"
+  const gridVAlign = definition?.grid?.vAlign || "center"
   const flexStyles = gridVAlign === "stretch" ? "1 1 0" : "0 0 auto"
   return {
     ["--grid-desktop-h-align"]: alignmentToStyleMap[gridHAlign],