refactor(ui): make measurement styles explicit and reuse preview white

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx

@@ -564,19 +564,19 @@ export const Code = memo(function Code({
       const newVisualLineHeights: number[] = []
 
       const tempContainer = document.createElement('div')
-      tempContainer.style.cssText = `
-        position: absolute;
-        visibility: hidden;
-        height: auto;
-        width: ${preElement.clientWidth}px;
-        font-family: ${window.getComputedStyle(preElement).fontFamily};
-        font-size: ${window.getComputedStyle(preElement).fontSize};
-        line-height: ${LINE_HEIGHT_PX}px;
-        padding: 8px;
-        white-space: pre-wrap;
-        word-break: break-word;
-        box-sizing: border-box;
-      `
+      Object.assign(tempContainer.style, {
+        position: 'absolute',
+        visibility: 'hidden',
+        height: 'auto',
+        width: `${preElement.clientWidth}px`,
+        fontFamily: window.getComputedStyle(preElement).fontFamily,
+        fontSize: window.getComputedStyle(preElement).fontSize,
+        lineHeight: `${LINE_HEIGHT_PX}px`,
+        padding: '8px',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        boxSizing: 'border-box',
+      })
       document.body.appendChild(tempContainer)
 
       lines.forEach((line: string) => {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx

@@ -466,16 +466,16 @@ export function ConditionInput({
 
         // Create a hidden container with the same width as the editor
         const container = document.createElement('div')
-        container.style.cssText = `
-          position: absolute;
-          visibility: hidden;
-          width: ${preElement.clientWidth}px;
-          font-family: ${window.getComputedStyle(preElement).fontFamily};
-          font-size: ${window.getComputedStyle(preElement).fontSize};
-          padding: 12px;
-          white-space: pre-wrap;
-          word-break: break-word;
-        `
+        Object.assign(container.style, {
+          position: 'absolute',
+          visibility: 'hidden',
+          width: `${preElement.clientWidth}px`,
+          fontFamily: window.getComputedStyle(preElement).fontFamily,
+          fontSize: window.getComputedStyle(preElement).fontSize,
+          padding: '12px',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+        })
         document.body.appendChild(container)
 
         // Process each line
@@ -487,9 +487,6 @@ export function ConditionInput({
             parts.forEach((part) => {
               const span = document.createElement('span')
               span.textContent = part
-              if (part.startsWith('<') && part.endsWith('>')) {
-                span.style.color = 'rgb(153, 0, 85)'
-              }
               lineDiv.appendChild(span)
             })
           } else {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx

@@ -64,16 +64,16 @@ export function CodeEditor({
       const newVisualLineHeights: number[] = []
 
       const container = document.createElement('div')
-      container.style.cssText = `
-        position: absolute;
-        visibility: hidden;
-        width: ${preElement.clientWidth}px;
-        font-family: ${window.getComputedStyle(preElement).fontFamily};
-        font-size: ${window.getComputedStyle(preElement).fontSize};
-        padding: 12px;
-        white-space: pre-wrap;
-        word-break: break-word;
-      `
+      Object.assign(container.style, {
+        position: 'absolute',
+        visibility: 'hidden',
+        width: `${preElement.clientWidth}px`,
+        fontFamily: window.getComputedStyle(preElement).fontFamily,
+        fontSize: window.getComputedStyle(preElement).fontSize,
+        padding: '12px',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+      })
       document.body.appendChild(container)
 
       lines.forEach((line) => {

apps/sim/lib/pptx-renderer/core/viewer.ts

@@ -617,7 +617,7 @@ export class PptxViewer extends EventTarget {
       box-shadow: 0 2px 8px rgba(0,0,0,0.15);
       overflow: hidden;
       position: relative;
-      background: #fff;
+      background: var(--white);
     `
 
     item.appendChild(wrapper)