fix playground focus issue

packages/components/src/components/SquigglePlayground.tsx

@@ -394,18 +394,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     </div>
   );
 
-  const InFirstTab: React.FC<{ children: React.ReactNode }> = ({
+  const squiggleChart = (
-    children,
-  }) => (
-    <Tab.Panels>
-      <Tab.Panel>{children}</Tab.Panel>
-      <Tab.Panel>{samplingSettings}</Tab.Panel>
-      <Tab.Panel>{viewSettings}</Tab.Panel>
-      <Tab.Panel>{inputVariableSettings}</Tab.Panel>
-    </Tab.Panels>
-  );
-
-  let squiggleChart = (
     <SquiggleChart
       squiggleString={code}
       environment={env}
@@ -419,10 +408,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     />
   );
 
-  let withEditor = (
+  const firstTab = vars.showEditor ? (
-    <div className="flex mt-1" style={{ height }}>
-      <div className="w-1/2">
-        <InFirstTab>
     <div className="border border-slate-200">
       <CodeEditor
         value={code}
@@ -438,18 +424,27 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
         height={height - 1}
       />
     </div>
-        </InFirstTab>
+  ) : (
-      </div>
+    squiggleChart
+  );
 
+  const tabs = (
+    <Tab.Panels>
+      <Tab.Panel>{firstTab}</Tab.Panel>
+      <Tab.Panel>{samplingSettings}</Tab.Panel>
+      <Tab.Panel>{viewSettings}</Tab.Panel>
+      <Tab.Panel>{inputVariableSettings}</Tab.Panel>
+    </Tab.Panels>
+  );
+
+  const withEditor = (
+    <div className="flex mt-1" style={{ height }}>
+      <div className="w-1/2">{tabs}</div>
       <div className="w-1/2 p-2 pl-4">{squiggleChart}</div>
     </div>
   );
 
-  let withoutEditor = (
+  const withoutEditor = <div className="mt-3">{tabs}</div>;
-    <div className="mt-3">
-      <InFirstTab>{squiggleChart}</InFirstTab>
-    </div>
-  );
 
   return (
     <SquiggleContainer>