fixed keyboard

831112854df4999a7117227a6c9f8cb1ba720ec1 · Pavel Safronov · 2026-03-23 23:00:47 -0700 · parents 95713dcf65d8

fixed keyboard

 src/styles/main.css | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index 949b37c..1f6899a 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -316,22 +316,27 @@ header {
 }
 
 /* --- Keyboard --------------------------------------------- */
+/* 10 keys + 9 gaps per row; #app has 12px padding on each side (24px total).
+   key-w = (100vw - 24px - 9 × 5px) / 10 = 10vw - 6.9px, capped at 43px.
+   Derived as CSS custom properties so wide keys stay proportional. */
 .keyboard {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     width: 100%;
+    --key-w: clamp(26px, calc(10vw - 6.9px), 43px);
+    --key-w-wide: clamp(40px, calc(15vw - 10px), 65px);
 }
 
 .keyboard__row {
     display: flex;
     justify-content: center;
-    gap: 6px;
+    gap: 5px;
 }
 
 .keyboard__key {
-    width: clamp(30px, 8.5vw, 43px);
+    width: var(--key-w);
     height: clamp(38px, 6dvh, 58px);
     flex: none;
     padding: 0;
@@ -339,7 +344,7 @@ header {
     border-radius: var(--radius);
     background: var(--color-key-bg);
     color: var(--color-key-text);
-    font-size: clamp(0.7rem, 2.2vw, 0.85rem);
+    font-size: clamp(0.65rem, 2.2vw, 0.85rem);
     font-weight: 700;
     cursor: pointer;
     text-transform: uppercase;
@@ -348,8 +353,8 @@ header {
 }
 
 .keyboard__key--wide {
-    width: clamp(46px, 13vw, 65px);
-    font-size: clamp(0.6rem, 1.8vw, 0.75rem);
+    width: var(--key-w-wide);
+    font-size: clamp(0.55rem, 1.8vw, 0.75rem);
 }
 
 .keyboard__key:active {