feat: Add configurable UI scale option

1 files changed, 10 insertions, 9 deletions

diff --git a/internal/server/static/style.css b/internal/server/static/style.css
index f494dcf..2e57537 100644
--- a/internal/server/static/style.css
+++ b/internal/server/static/style.css
@@ -13,6 +13,7 @@
 html {
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
+    font-size: calc(16px * var(--scale, 1));
 }
 
 :root {
@@ -67,7 +68,7 @@ body {
     background: var(--bg-primary);
     color: var(--text-primary);
     font-family: 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;
-    font-size: 12px;
+    font-size: 0.75rem; /* 12px at scale 1 */
     line-height: 1.5;
 }
 
@@ -220,7 +221,7 @@ a {
 .min-h-screen { min-height: 100vh; }
 .min-w-0 { min-width: 0px; }
 .max-w-4xl { max-width: 56rem; }
-.max-w-\[200px\] { max-width: 200px; }
+.max-w-\[200px\] { max-width: 12.5rem; } /* 200px at scale 1 */
 
 /* Spacing - more compact */
 .mx-auto { margin-left: auto; margin-right: auto; }
@@ -255,10 +256,10 @@ a {
 .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color); }
 
 /* Typography */
-.text-xs { font-size: 11px; line-height: 1.4; }
-.text-sm { font-size: 12px; line-height: 1.5; }
-.text-lg { font-size: 14px; line-height: 1.5; }
-.text-xl { font-size: 16px; line-height: 1.5; }
+.text-xs { font-size: 0.6875rem; line-height: 1.4; } /* 11px at scale 1 */
+.text-sm { font-size: 0.75rem; line-height: 1.5; }   /* 12px at scale 1 */
+.text-lg { font-size: 0.875rem; line-height: 1.5; }  /* 14px at scale 1 */
+.text-xl { font-size: 1rem; line-height: 1.5; }      /* 16px at scale 1 */
 .font-medium { font-weight: 400; }
 .font-semibold { font-weight: 400; }
 .font-bold { font-weight: 400; }
@@ -296,7 +297,7 @@ a {
 @media (min-width: 640px) {
     .sm\:py-12 { padding-top: 2.4rem; padding-bottom: 2.4rem; }
     .sm\:mb-12 { margin-bottom: 2.4rem; }
-    .sm\:text-2xl { font-size: 18px; line-height: 1.5; }
+    .sm\:text-2xl { font-size: 1.125rem; line-height: 1.5; } /* 18px at scale 1 */
 }
 
 /* Space */
@@ -338,7 +339,7 @@ svg { fill: none; }
     position: fixed;
     z-index: 1000;
     padding: 0.5rem 0.7rem;
-    font-size: 11px;
+    font-size: 0.6875rem; /* 11px at scale 1 */
     line-height: 1.5;
     background-color: var(--bg-secondary);
     color: var(--text-primary);
@@ -349,7 +350,7 @@ svg { fill: none; }
     opacity: 0;
     transform: translateY(4px);
     transition: opacity 100ms ease, transform 100ms ease;
-    max-width: 280px;
+    max-width: 17.5rem; /* 280px at scale 1 */
     white-space: normal;
 }