From ff98038d3f9c064d64ae8b1f9910277f0b263036 Mon Sep 17 00:00:00 2001
From: Aejkatappaja <joverjlj@gmail.com>
Date: Thu, 23 Apr 2026 23:08:46 +0200
Subject: [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.
---
 .changeset/fix-ui-layout-polish.md            |  8 +++++
 .../ui/src/features/CodeBreak/StateParser.tsx | 34 +++++++++----------
 .../ui/src/features/Preloads/Preloads.tsx     |  4 +--
 3 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/fix-ui-layout-polish.md

diff --git a/.changeset/fix-ui-layout-polish.md b/.changeset/fix-ui-layout-polish.md
new file mode 100644
index 0000000..f49bcf4
--- /dev/null
+++ b/.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.
diff --git a/packages/ui/src/features/CodeBreak/StateParser.tsx b/packages/ui/src/features/CodeBreak/StateParser.tsx
index 949ff31..4f9b00b 100644
--- a/packages/ui/src/features/CodeBreak/StateParser.tsx
+++ b/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>
 
diff --git a/packages/ui/src/features/Preloads/Preloads.tsx b/packages/ui/src/features/Preloads/Preloads.tsx
index 636855c..01f31c8 100644
--- a/packages/ui/src/features/Preloads/Preloads.tsx
+++ b/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"