chore: improved ui for runner settings dropdown

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

@@ -4,7 +4,7 @@ import type { Setter } from 'solid-js'
 import type { CustomTypeScriptWorker } from '../editor/utils/custom-worker.ts'
 import { timers } from '@fuman/utils'
 import { persistentAtom } from '@nanostores/persistent'
-import { LucideCheck, LucidePlay, LucidePlug, LucideRefreshCw, LucideSkull, LucideUnplug } from 'lucide-solid'
+import { LucideCheck, LucidePlay, LucidePlug, LucideRefreshCw, LucideSettings2, LucideSkull, LucideUnplug } from 'lucide-solid'
 import { languages, Uri } from 'monaco-editor/esm/vs/editor/editor.api.js'
 import { createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
@@ -268,14 +268,7 @@ export function Runner(props: {
             </Button>
           )}
           <div class="flex-1" />
-          <DropdownMenu>
+          <div class="mr-2 flex items-center text-xs font-medium">
-            <DropdownMenuTrigger
-              as={(props: DropdownMenuTriggerProps) => (
-                <Button
-                  variant="ghost"
-                  size="xs"
-                  {...props}
-                >
             {{
               offline: 'Disconnected',
               connecting: 'Connecting...',
@@ -292,6 +285,17 @@ export function Runner(props: {
               }[connectionState()],
             )}
             />
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              as={(props: DropdownMenuTriggerProps) => (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  class="size-7"
+                  {...props}
+                >
+                  <LucideSettings2 class="size-4" />
                 </Button>
               )}
             />