Fix resizable pannel doing its job badly

packages/repl/src/App.tsx

@@ -16,6 +16,7 @@ export function App() {
   const [updating, setUpdating] = createSignal(true)
   const [showSettings, setShowSettings] = createSignal(false)
   const [settingsTab, setSettingsTab] = createSignal<SettingsTab>('accounts')
+  const [isResizing, setIsResizing] = createSignal(false)
 
   let workerIframe!: HTMLIFrameElement
 
@@ -65,12 +66,12 @@ export function App() {
               <EditorTabs />
               <Editor class="size-full" />
             </ResizablePanel>
-            <ResizableHandle withHandle />
+            <ResizableHandle withHandle onMouseDown={() => setIsResizing(true)} onMouseUp={() => setIsResizing(false)} />
             <ResizablePanel
               class="flex max-h-full flex-col overflow-hidden"
               minSize={0.2}
             >
-              <Runner />
+              <Runner isResizing={isResizing()} />
             </ResizablePanel>
           </Resizable>
         </Show>

packages/repl/src/components/runner/Runner.tsx

@@ -25,7 +25,7 @@ const $enableUpdates = persistentAtom('repl:enableUpdates', true, {
   decode: value => value === 'true',
 })
 
-export function Runner() {
+export function Runner(props: { isResizing: boolean }) {
   const [devtoolsIframe, setDevtoolsIframe] = createSignal<HTMLIFrameElement | undefined>()
   const [runnerIframe, setRunnerIframe] = createSignal<HTMLIFrameElement>()
   const [runnerLoaded, setRunnerLoaded] = createSignal(false)
@@ -315,7 +315,7 @@ export function Runner() {
       </div>
       <div class="h-px shrink-0 bg-border" />
       <Devtools
-        class="size-full grow-0"
+        class={cn('size-full grow-0', props.isResizing && 'pointer-events-none')}
         iframeRef={setDevtoolsIframe}
       />
     </>