fix(ui): Preloads overflow clipping and CodeBreak button placement

.changeset/fix-ui-layout-polish.md

@@ -0,0 +1,8 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+fix(ui): Preloads overflow clipping and CodeBreak button placement
+
+- Preloads panel: outer `overflow-hidden` clipped stat cards and prevented scroll when content exceeded the panel height. Switched to `overflow-auto` with `min-h-full` on the column stack so content scrolls on narrow or short panels.
+- CodeBreak StateParser: content container was missing the `flex` class, so the textarea pushed the `Parse State` button outside the card into the next grid row, overlapping the `Parsed State` header. Moved the button into the card header next to the title — robust across panel widths and cleaner UX.

packages/ui/src/features/CodeBreak/StateParser.tsx

@@ -117,31 +117,31 @@ export const StateParser = component$(() => {
   return (
     <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
       <div class="border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border">
-        <div class="border-glass-border flex items-center justify-between border-b p-3">
-          <div class="text-sm font-medium">Input State</div>
-          {parsingTime.value !== null && (
-            <span class="border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs">
-              {parsingTime.value}ms
-            </span>
-          )}
+        <div class="border-glass-border flex items-center justify-between gap-3 border-b p-3">
+          <div class="flex items-center gap-3">
+            <div class="text-sm font-medium">Input State</div>
+            {parsingTime.value !== null && (
+              <span class="border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs">
+                {parsingTime.value}ms
+              </span>
+            )}
+          </div>
+          <button
+            onClick$={onParseState$}
+            class="bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90"
+          >
+            Parse State
+          </button>
         </div>
-        <div class="min-h-0 flex-1 flex-col space-y-3 p-3">
+        <div class="flex min-h-0 flex-1 flex-col p-3">
           <textarea
             value={inputState.value}
             onInput$={(e: InputEvent, t: HTMLTextAreaElement) =>
               (inputState.value = (t as HTMLTextAreaElement).value)
             }
             placeholder="Paste Qwik state and click to parse/format."
-            class="border-glass-border bg-card-item-bg text-foreground h-full min-h-0 w-full flex-1 resize-none rounded-md border p-3 font-mono text-sm placeholder:text-muted-foreground"
+            class="border-glass-border bg-card-item-bg text-foreground min-h-0 w-full flex-1 resize-none rounded-md border p-3 font-mono text-sm placeholder:text-muted-foreground"
           />
-          <div class="flex items-center gap-3">
-            <button
-              onClick$={onParseState$}
-              class="bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90"
-            >
-              Parse State
-            </button>
-          </div>
         </div>
       </div>
 

packages/ui/src/features/Preloads/Preloads.tsx

@@ -102,8 +102,8 @@ export const Preloads = component$(() => {
   });
 
   return (
-    <div class="h-full w-full flex-1 overflow-hidden">
-      <div class="flex h-full min-h-0 flex-col gap-4">
+    <div class="h-full w-full flex-1 overflow-auto">
+      <div class="flex min-h-full flex-col gap-4">
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
           <StatCard
             label="Visible QRLs"