From a43d7e5326fd0cb4dfbc84bb38c5a44b697adafe Mon Sep 17 00:00:00 2001
From: Harry Whorlow <whorlowharry@gmail.com>
Date: Wed, 25 Mar 2026 19:20:50 +0100
Subject: [PATCH 1/2] fix(devtools): remove style object to stop solid
 importing setStyleProperty

---
 .../pacer-devtools/src/components/Shell.tsx     | 17 +++--------------
 .../src/components/StateHeader.tsx              |  7 ++-----
 .../pacer-devtools/src/styles/use-styles.ts     | 15 ++++++++++++++-
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/pacer-devtools/src/components/Shell.tsx b/packages/pacer-devtools/src/components/Shell.tsx
index 4a5631ff1..a8865918b 100644
--- a/packages/pacer-devtools/src/components/Shell.tsx
+++ b/packages/pacer-devtools/src/components/Shell.tsx
@@ -125,14 +125,7 @@ export function Shell() {
     <div
       ref={setShellRootEl}
       class={styles().shellRoot}
-      style={{
-        ...(slotHeightPx() !== undefined
-          ? {
-              height: `${slotHeightPx()}px`,
-              'max-height': `${slotHeightPx()}px`,
-            }
-          : {}),
-      }}
+      style={slotHeightPx() !== undefined ? `--shell-slot-height: ${slotHeightPx()}px` : undefined}
     >
       <MainPanel class={styles().mainPanelShell}>
         <Header>
@@ -144,11 +137,7 @@ export function Shell() {
         <div class={styles().mainContainer}>
           <div
             class={styles().leftPanel}
-            style={{
-              width: `${leftPanelWidth()}px`,
-              'min-width': '150px',
-              'max-width': '800px',
-            }}
+            style={`--left-panel-width: ${leftPanelWidth()}px`}
           >
             <UtilList
               selectedKey={selectedKey}
@@ -162,7 +151,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}
diff --git a/packages/pacer-devtools/src/components/StateHeader.tsx b/packages/pacer-devtools/src/components/StateHeader.tsx
index 112ca3f0b..e416cdd74 100644
--- a/packages/pacer-devtools/src/components/StateHeader.tsx
+++ b/packages/pacer-devtools/src/components/StateHeader.tsx
@@ -87,7 +87,7 @@ function StateHeaderInner(props: {
   return (
     <div class={props.styles.stateHeader}>
       <div class={props.styles.stateTitle}>{props.entry.type}</div>
-      <div style={{ display: 'flex', 'align-items': 'center', gap: '16px' }}>
+      <div class={props.styles.stateHeaderMeta}>
         <div class={props.styles.infoGrid}>
           <div class={props.styles.infoLabel}>Key</div>
           <div class={props.styles.infoValueMono}>{key}</div>
@@ -96,10 +96,7 @@ function StateHeaderInner(props: {
             {new Date(updatedAt()).toLocaleTimeString()} ({getRelativeTime()})
           </div>
         </div>
-        <div
-          class={props.styles.infoValueMono}
-          style={{ 'margin-left': 'auto', 'font-weight': 'bold' }}
-        >
+        <div class={`${props.styles.infoValueMono} ${props.styles.stateHeaderReduction}`}>
           {reductionPercentage()}% reduction
         </div>
       </div>
diff --git a/packages/pacer-devtools/src/styles/use-styles.ts b/packages/pacer-devtools/src/styles/use-styles.ts
index 91ca2312b..291274281 100644
--- a/packages/pacer-devtools/src/styles/use-styles.ts
+++ b/packages/pacer-devtools/src/styles/use-styles.ts
@@ -19,7 +19,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       flex-direction: column;
       box-sizing: border-box;
       width: 100%;
-      height: 100%;
+      height: var(--shell-slot-height, 100%);
+      max-height: var(--shell-slot-height, unset);
       min-height: 0;
       overflow: hidden;
     `,
@@ -88,6 +89,9 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       overflow: hidden;
       min-height: 0;
       flex-shrink: 0;
+      width: var(--left-panel-width, 300px);
+      min-width: 150px;
+      max-width: 800px;
     `,
     rightPanel: css`
       background: ${t(colors.gray[100], colors.darkGray[800])};
@@ -372,6 +376,15 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         box-shadow 0.3s,
         background 0.3s;
     `,
+    stateHeaderMeta: css`
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    `,
+    stateHeaderReduction: css`
+      margin-left: auto;
+      font-weight: bold;
+    `,
   }
 }
 

From 21c3d44930e6cf8fc3b2bac241d1a59baef0cacc Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 25 Mar 2026 18:22:11 +0000
Subject: [PATCH 2/2] ci: apply automated fixes

---
 packages/pacer-devtools/src/components/Shell.tsx       | 6 +++++-
 packages/pacer-devtools/src/components/StateHeader.tsx | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/pacer-devtools/src/components/Shell.tsx b/packages/pacer-devtools/src/components/Shell.tsx
index a8865918b..0d8a2072e 100644
--- a/packages/pacer-devtools/src/components/Shell.tsx
+++ b/packages/pacer-devtools/src/components/Shell.tsx
@@ -125,7 +125,11 @@ export function Shell() {
     <div
       ref={setShellRootEl}
       class={styles().shellRoot}
-      style={slotHeightPx() !== undefined ? `--shell-slot-height: ${slotHeightPx()}px` : undefined}
+      style={
+        slotHeightPx() !== undefined
+          ? `--shell-slot-height: ${slotHeightPx()}px`
+          : undefined
+      }
     >
       <MainPanel class={styles().mainPanelShell}>
         <Header>
diff --git a/packages/pacer-devtools/src/components/StateHeader.tsx b/packages/pacer-devtools/src/components/StateHeader.tsx
index e416cdd74..dbd0357b4 100644
--- a/packages/pacer-devtools/src/components/StateHeader.tsx
+++ b/packages/pacer-devtools/src/components/StateHeader.tsx
@@ -96,7 +96,9 @@ function StateHeaderInner(props: {
             {new Date(updatedAt()).toLocaleTimeString()} ({getRelativeTime()})
           </div>
         </div>
-        <div class={`${props.styles.infoValueMono} ${props.styles.stateHeaderReduction}`}>
+        <div
+          class={`${props.styles.infoValueMono} ${props.styles.stateHeaderReduction}`}
+        >
           {reductionPercentage()}% reduction
         </div>
       </div>