refactor(ui): narrow local style forwarding and preview geometry (#8144)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

Author: BillLeoutsakosvl346

apps/sim/app/workspace/[workspaceId]/components/custom-tool-editor/custom-tool-code-field.tsx

@@ -284,7 +284,6 @@ export function CustomToolCodeField({
             }}
             className='w-64'
             style={{
-              position: 'absolute',
               top: `${dropdownPosition.top}px`,
               left: `${dropdownPosition.left}px`,
             }}
@@ -309,7 +308,6 @@ export function CustomToolCodeField({
             }}
             className='w-64'
             style={{
-              position: 'absolute',
               top: `${dropdownPosition.top}px`,
               left: `${dropdownPosition.left}px`,
             }}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx

@@ -264,7 +264,7 @@ const MARKDOWN_COMPONENTS = {
   th({ children, style }: ThProps) {
     return (
       <th
-        style={style}
+        style={{ textAlign: style?.textAlign }}
         className='whitespace-nowrap border-[var(--border)] border-b px-3 py-2 text-left font-semibold text-[var(--text-primary)] text-sm leading-6'
       >
         {children}
@@ -274,7 +274,7 @@ const MARKDOWN_COMPONENTS = {
   td({ children, style }: TdProps) {
     return (
       <td
-        style={style}
+        style={{ textAlign: style?.textAlign }}
         className='whitespace-nowrap border-[var(--border)] border-b px-3 py-2 text-[var(--text-primary)] text-sm leading-6'
       >
         {children}

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx

@@ -180,7 +180,7 @@ function FormattedInput({
           onClose={envVarProps.onClose}
           className='w-full'
           maxHeight='200px'
-          style={{ position: 'absolute', top: '100%', left: 0, zIndex: 99999 }}
+          style={{ top: '100%', left: 0, zIndex: 99999 }}
         />
       )}
     </div>

apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx

@@ -11,8 +11,10 @@ const VIEWER_MASK_LENGTH = 10
 
 type SecretValueFieldProps = Omit<
   ComponentProps<'input'>,
-  'type' | 'value' | 'onChange' | 'readOnly'
+  'type' | 'value' | 'onChange' | 'readOnly' | 'style'
 > & {
+  /** The chip owns field styling; callers use className for layout. */
+  style?: never
   value: string
   onChange?: (value: string) => void
   /**
@@ -47,7 +49,7 @@ export function SecretValueField({
   readOnly = false,
   onFocus,
   onBlur,
-  style,
+  style: _style,
   className,
   ...props
 }: SecretValueFieldProps) {
@@ -68,7 +70,6 @@ export function SecretValueField({
       type='text'
       value={displayValue}
       readOnly
-      style={style}
       inputClassName={visuallyMaskEditableValue ? '[-webkit-text-security:disc]' : undefined}
       onChange={(event) => {
         if (editable) onChange?.(event.target.value)

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

@@ -33,7 +33,7 @@ interface EnvVarDropdownProps {
   /** Callback when the dropdown should close */
   onClose?: () => void
   /** Custom styles for positioning */
-  style?: React.CSSProperties
+  style?: Pick<React.CSSProperties, 'top' | 'left' | 'zIndex'>
   /** Workspace ID for loading workspace-specific environment variables */
   workspaceId?: string
   /** Maximum height for the dropdown */
@@ -286,7 +286,7 @@ export const EnvVarDropdown: React.FC<EnvVarDropdownProps> = ({
         <div
           className={cn('pointer-events-none', className)}
           style={{
-            ...style,
+            zIndex: style?.zIndex,
             position: inputElement ? 'fixed' : 'absolute',
             top: inputElement ? `${caretViewport.top}px` : style?.top,
             left: inputElement ? `${caretViewport.left}px` : style?.left,

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

@@ -81,7 +81,7 @@ interface TagDropdownProps {
   /** Callback when the dropdown should close */
   onClose?: () => void
   /** Custom styles for positioning */
-  style?: React.CSSProperties
+  style?: Pick<React.CSSProperties, 'top' | 'left' | 'zIndex'>
   /** Reference to the input element for caret positioning */
   inputRef?: React.RefObject<HTMLTextAreaElement | HTMLInputElement | null>
 }
@@ -1616,7 +1616,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           <div
             className={cn('pointer-events-none', className)}
             style={{
-              ...style,
+              zIndex: style?.zIndex,
               position: inputElement ? 'fixed' : 'absolute',
               top: inputElement ? `${caretViewport.top}px` : style?.top,
               left: inputElement ? `${caretViewport.left}px` : style?.left,

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

@@ -611,14 +611,14 @@ export class PptxViewer extends EventTarget {
     item.style.cssText = 'width: fit-content; margin: 0 auto 20px;'
 
     const wrapper = document.createElement('div')
-    wrapper.style.cssText = `
-      width: ${displayWidth}px;
-      height: ${displayHeight}px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-      overflow: hidden;
-      position: relative;
-      background: var(--white);
-    `
+    Object.assign(wrapper.style, {
+      width: `${displayWidth}px`,
+      height: `${displayHeight}px`,
+      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+      overflow: 'hidden',
+      position: 'relative',
+      background: 'var(--white)',
+    })
 
     item.appendChild(wrapper)
 
@@ -860,11 +860,14 @@ export class PptxViewer extends EventTarget {
     this.mountedSlides.add(this.currentSlide)
 
     const wrapper = document.createElement('div')
-    wrapper.style.cssText = `
-      width: ${displayWidth}px; height: ${displayHeight}px;
-      margin: 0 auto; overflow: hidden; position: relative;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    `
+    Object.assign(wrapper.style, {
+      width: `${displayWidth}px`,
+      height: `${displayHeight}px`,
+      margin: '0 auto',
+      overflow: 'hidden',
+      position: 'relative',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+    })
 
     try {
       const handle = renderSlideInternal(this.presentation, slide, {