diff --git a/index.html b/index.html
index 5b81c53..a8c9d91 100644
--- a/index.html
+++ b/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;
- height: 18px;
+ width: 1.4em;
+ 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;
- height: 16px;
+ width: 1.3em;
+ 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 {