diff --git a/packages/pacer-devtools/src/components/Shell.tsx b/packages/pacer-devtools/src/components/Shell.tsx
index 4a5631ff1..0d8a2072e 100644
--- a/packages/pacer-devtools/src/components/Shell.tsx
+++ b/packages/pacer-devtools/src/components/Shell.tsx
@@ -125,14 +125,11 @@ 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 +141,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 +155,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..dbd0357b4 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>
@@ -97,8 +97,7 @@ function StateHeaderInner(props: {
           </div>
         </div>
         <div
-          class={props.styles.infoValueMono}
-          style={{ 'margin-left': 'auto', 'font-weight': 'bold' }}
+          class={`${props.styles.infoValueMono} ${props.styles.stateHeaderReduction}`}
         >
           {reductionPercentage()}% reduction
         </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;
+    `,
   }
 }