Make debug panel responsive with vh/vw units and clamp

index.html

@@ -13,19 +13,23 @@
             position: fixed;
             bottom: 2vh;
             left: 2vh;
-            width: 280px;
+            width: 20vw;
+            min-width: 200px;
+            max-width: 320px;
             background: rgba(28, 27, 31, 0.85);
             border: 1px solid rgba(230, 223, 209, 0.3);
             border-radius: 0.6vh;
             padding: 1vh 1vw;
             color: var(--bone);
             font-family: monospace;
-            font-size: 12px;
+            font-size: clamp(9px, 1.2vh, 14px);
             line-height: 1.4;
             z-index: 9999;
+            max-height: 90vh;
+            overflow-y: auto;
         }
         .debug-title {
-            font-size: 14px;
+            font-size: 1.2em;
             font-weight: bold;
             color: var(--orange);
             border-bottom: 1px solid rgba(230, 223, 209, 0.3);
@@ -33,7 +37,7 @@
             margin-bottom: 6px;
         }
         .debug-section {
-            font-size: 12px;
+            font-size: 1em;
             color: var(--icon);
             margin-top: 6px;
             margin-bottom: 2px;
@@ -54,22 +58,22 @@
         }
         .hex {
             color: var(--bone);
-            font-size: 10px;
+            font-size: 0.9em;
             font-family: monospace;
         }
         .swatch {
-            width: 18px;
+            width: 1.4em;
-            height: 18px;
+            height: 1.4em;
             border: 1px solid var(--stone);
             border-radius: 2px;
         }
         .theme-table {
-            font-size: 11px;
+            font-size: 0.9em;
             margin-top: 4px;
         }
         .theme-table-row {
             display: grid;
-            grid-template-columns: 70px 30px 30px 30px 30px 44px;
+            grid-template-columns: 5em 1.6em 1.6em 1.6em 1.6em 2.5em;
             gap: 5px;
             align-items: center;
             padding: 1px 0;
@@ -84,14 +88,14 @@
             color: var(--bone);
         }
         .theme-table-mini-swatch {
-            width: 16px;
+            width: 1.3em;
-            height: 16px;
+            height: 1.3em;
             border: 1px solid var(--border);
             border-radius: 1px;
         }
         .theme-table-speed {
             color: var(--icon);
-            font-size: 10px;
+            font-size: 0.85em;
         }
         @media (orientation: portrait) and (max-width: 700px) {
             #debug-panel {