diff --git a/js/examples/browser/index.html b/js/examples/browser/index.html
index d52837b6..e759520a 100644
--- a/js/examples/browser/index.html
+++ b/js/examples/browser/index.html
@@ -12,6 +12,10 @@
         --button-text: #e0e0e0;
         --section-bg: #252525;
         --border-color: #444;
+        --control-bg: #333;
+        --control-text: #e0e0e0;
+        --control-border: #444;
+        --control-disabled-bg: #2b2b2b;
       }
 
       [data-theme="light"] {
@@ -21,9 +25,22 @@
         --button-text: #1a1a1a;
         --section-bg: #f5f5f5;
         --border-color: #ddd;
+        --control-bg: #ffffff;
+        --control-text: #1a1a1a;
+        --control-border: #cbd5e1;
+        --control-disabled-bg: #f1f5f9;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        min-width: 0;
       }
 
       body {
+        margin: 0;
         background-color: var(--bg-color);
         color: var(--text-color);
         font-family:
@@ -31,6 +48,7 @@
           -apple-system,
           sans-serif;
         padding: 20px;
+        min-width: 0;
         transition:
           background-color 0.3s,
           color 0.3s;
@@ -44,6 +62,7 @@
         border-radius: 6px;
         cursor: pointer;
         margin: 4px;
+        max-width: 100%;
       }
 
       button:hover {
@@ -56,6 +75,8 @@
         border-radius: 8px;
         margin-top: 16px;
         border: 1px solid var(--border-color);
+        max-width: 100%;
+        min-width: 0;
       }
 
       pre {
@@ -63,6 +84,7 @@
         padding: 12px;
         border-radius: 4px;
         overflow-x: auto;
+        max-width: 100%;
       }
 
       .theme-toggle {
@@ -120,12 +142,14 @@
         display: flex;
         flex-direction: column;
         gap: 10px;
+        min-width: 0;
       }
 
       .config-row {
         display: flex;
         align-items: center;
         gap: 10px;
+        min-width: 0;
       }
 
       .config-row > label {
@@ -137,17 +161,20 @@
       .config-row input[type="text"],
       .config-row select {
         flex: 1;
+        min-width: 0;
+        max-width: 100%;
         font-family: monospace;
         font-size: 14px;
         padding: 6px 10px;
         border-radius: 6px;
-        border: 1px solid var(--border-color);
-        background: var(--button-bg);
-        color: var(--text-color);
+        border: 1px solid var(--control-border);
+        background: var(--control-bg);
+        color: var(--control-text);
       }
 
       .config-row input[type="text"][readonly] {
-        opacity: 0.5;
+        background: var(--control-disabled-bg);
+        opacity: 0.75;
       }
 
       #codeDisplay {
@@ -157,6 +184,7 @@
         background: var(--button-bg);
         border-radius: 6px;
         word-break: break-all;
+        overflow-wrap: anywhere;
         line-height: 1.5;
         user-select: all;
       }
@@ -166,6 +194,7 @@
         align-items: center;
         gap: 8px;
         margin-top: 10px;
+        min-width: 0;
       }
 
       .copy-row button {
@@ -173,6 +202,67 @@
         padding: 6px 12px;
         font-size: 13px;
       }
+
+      body > div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 16px;
+      }
+
+      body > div > button {
+        margin: 0;
+      }
+
+      @media (max-width: 700px) {
+        body {
+          padding: 64px 16px 48px;
+        }
+
+        button {
+          white-space: normal;
+        }
+
+        .config-row {
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 8px 10px;
+        }
+
+        .config-row > label {
+          flex-basis: 100%;
+          min-width: 0;
+        }
+
+        .config-row > label:empty {
+          display: none;
+        }
+
+        .config-row input[type="text"],
+        .config-row select {
+          flex: 1 1 100%;
+          width: 100%;
+        }
+
+        .config-row input[type="checkbox"] {
+          flex: 0 0 auto;
+        }
+
+        .config-row small {
+          min-width: 0;
+          overflow-wrap: anywhere;
+        }
+
+        body > div > button,
+        .copy-row button {
+          flex: 1 1 100%;
+        }
+
+        .copy-row {
+          align-items: stretch;
+          flex-wrap: wrap;
+        }
+      }
     </style>
   </head>
   <body>
diff --git a/js/examples/nextjs/app/globals.css b/js/examples/nextjs/app/globals.css
index 7caea94c..6113322b 100644
--- a/js/examples/nextjs/app/globals.css
+++ b/js/examples/nextjs/app/globals.css
@@ -6,6 +6,10 @@
   --border-color: #444;
   --button-bg: #333;
   --button-text: #e0e0e0;
+  --control-bg: #333;
+  --control-text: #e0e0e0;
+  --control-border: #444;
+  --control-disabled-bg: #2b2b2b;
   --status-color: #cbd5e1;
   --code-bg: #0f172a;
   --code-text: #e2e8f0;
@@ -23,6 +27,10 @@
   --border-color: #e2e8f0;
   --button-bg: #0f172a;
   --button-text: #ffffff;
+  --control-bg: #ffffff;
+  --control-text: #0f172a;
+  --control-border: #cbd5e1;
+  --control-disabled-bg: #f1f5f9;
   --status-color: #334155;
   --code-bg: #0f172a;
   --code-text: #e2e8f0;
@@ -58,6 +66,7 @@ main {
   max-width: 980px;
   margin: 0 auto;
   padding: 40px 16px 80px;
+  min-width: 0;
 }
 
 section {
@@ -66,6 +75,8 @@ section {
   border-radius: 14px;
   padding: 18px;
   margin-bottom: 16px;
+  max-width: 100%;
+  min-width: 0;
 }
 
 button {
@@ -107,6 +118,8 @@ pre {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
+  max-width: 100%;
+  min-width: 0;
 }
 
 .status {
@@ -126,6 +139,7 @@ pre {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  min-width: 0;
 }
 
 .config-row {
@@ -133,6 +147,7 @@ pre {
   align-items: center;
   gap: 10px;
   min-height: 34px;
+  min-width: 0;
 }
 
 .config-row > label {
@@ -147,14 +162,16 @@ pre {
 .config-row input[type="datetime-local"],
 .config-row select {
   flex: 1;
+  min-width: 0;
+  max-width: 100%;
   height: 34px;
   font-family: monospace;
   font-size: 14px;
   padding: 6px 10px;
   border-radius: 6px;
-  border: 1px solid var(--border-color);
-  background: var(--button-bg);
-  color: var(--text-color);
+  border: 1px solid var(--control-border);
+  background: var(--control-bg);
+  color: var(--control-text);
 }
 
 .config-row input[type="checkbox"] {
@@ -179,7 +196,7 @@ pre {
   border-radius: 999px;
   border: 1px solid var(--border-color);
   background: var(--button-bg);
-  color: var(--text-color);
+  color: var(--button-text);
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
@@ -211,15 +228,19 @@ pre {
 }
 
 .config-row input[type="text"][readonly] {
-  opacity: 0.5;
+  background: var(--control-disabled-bg);
+  opacity: 0.75;
 }
 
 .config-note {
   flex: 1;
+  min-width: 0;
+  max-width: 100%;
   font-family: monospace;
   font-size: 12px;
   opacity: 0.7;
   word-break: break-all;
+  overflow-wrap: anywhere;
 }
 
 .arena-sections,
@@ -259,6 +280,13 @@ pre {
   font-size: 16px;
 }
 
+.test-case-copy,
+.test-case-meta,
+.test-case-meta dd,
+.test-case-result {
+  min-width: 0;
+}
+
 .test-case-copy p {
   margin: 0 0 8px;
   color: var(--status-color);
@@ -289,6 +317,7 @@ pre {
   color: var(--status-color);
   font-size: 13px;
   line-height: 1.4;
+  overflow-wrap: anywhere;
 }
 
 .test-case-actions {
@@ -339,12 +368,70 @@ pre {
 }
 
 @media (max-width: 700px) {
+  main {
+    padding: 64px 16px 64px;
+  }
+
+  section {
+    padding: 16px;
+  }
+
+  button {
+    max-width: 100%;
+    white-space: normal;
+  }
+
+  .stack {
+    align-items: stretch;
+  }
+
+  .stack > button {
+    width: 100%;
+  }
+
+  .config-row {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 10px;
+    min-height: 0;
+  }
+
+  .config-row > label {
+    width: 100%;
+    flex-basis: 100%;
+  }
+
+  .config-row input[type="text"],
+  .config-row input[type="number"],
+  .config-row input[type="datetime-local"],
+  .config-row select {
+    flex: 1 1 100%;
+    width: 100%;
+  }
+
+  .config-row input[type="checkbox"],
+  .config-row .tooltip {
+    flex: 0 0 auto;
+  }
+
+  .config-note {
+    flex: 1 1 100%;
+    width: 100%;
+  }
+
+  .tooltip-content {
+    left: 0;
+    right: auto;
+    width: min(320px, calc(100vw - 48px));
+  }
+
   .test-case-row {
     grid-template-columns: 1fr;
   }
 
   .test-case-actions {
     justify-content: space-between;
+    flex-wrap: wrap;
   }
 
   .test-case-meta > div {