fix(devtools): fix solidjs importing setStyleProperty

Author: harry-whorlow

packages/pacer-devtools/src/components/Shell.tsx

@@ -1,4 +1,5 @@
 import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'
+import * as goober from 'goober'
 import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { usePacerDevtoolsState } from '../PacerContextProvider'
@@ -27,6 +28,11 @@ export function Shell() {
     return null
   })
 
+  const leftPanelWidthClass = () =>
+    goober.css`
+      width: ${leftPanelWidth()}px;
+    `
+
   let dragStartX = 0
   let dragStartWidth = 0
 
@@ -74,14 +80,7 @@ export function Shell() {
       </Header>
 
       <div class={styles().mainContainer}>
-        <div
-          class={styles().leftPanel}
-          style={{
-            width: `${leftPanelWidth()}px`,
-            'min-width': '150px',
-            'max-width': '800px',
-          }}
-        >
+        <div class={`${styles().leftPanel} ${leftPanelWidthClass()}`}>
           <UtilList
             selectedKey={selectedKey}
             setSelectedKey={setSelectedKey}
@@ -94,7 +93,7 @@ export function Shell() {
           onMouseDown={handleMouseDown}
         />
 
-        <div class={styles().rightPanel} style={{ flex: 1 }}>
+        <div class={styles().rightPanel}>
           <div class={styles().panelHeader}>Details</div>
           <DetailsPanel
             selectedInstance={selectedInstance}

packages/pacer-devtools/src/components/StateHeader.tsx

@@ -85,7 +85,7 @@ export function StateHeader(props: StateHeaderProps) {
   return (
     <div class={styles().stateHeader}>
       <div class={styles().stateTitle}>{entry.type}</div>
-      <div style={{ display: 'flex', 'align-items': 'center', gap: '16px' }}>
+      <div class={styles().stateHeaderRow}>
         <div class={styles().infoGrid}>
           <div class={styles().infoLabel}>Key</div>
           <div class={styles().infoValueMono}>{key}</div>
@@ -94,10 +94,7 @@ export function StateHeader(props: StateHeaderProps) {
             {new Date(updatedAt).toLocaleTimeString()} ({getRelativeTime()})
           </div>
         </div>
-        <div
-          class={styles().infoValueMono}
-          style={{ 'margin-left': 'auto', 'font-weight': 'bold' }}
-        >
+        <div class={`${styles().infoValueMono} ${styles().reductionBadge}`}>
           {reductionPercentage}% reduction
         </div>
       </div>

packages/pacer-devtools/src/styles/use-styles.ts

@@ -67,6 +67,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       overflow: hidden;
       min-height: 0;
       flex-shrink: 0;
+      min-width: 150px;
+      max-width: 800px;
     `,
     rightPanel: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
@@ -267,6 +269,15 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       border-radius: 9999px;
       background: ${colors.purple[400]};
     `,
+    stateHeaderRow: css`
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    `,
+    reductionBadge: css`
+      margin-left: auto;
+      font-weight: ${font.weight.bold};
+    `,
     infoGrid: css`
       display: grid;
       grid-template-columns: auto 1fr;