Просмотр исходного кода

fix: narrower keyboard for phone screens (both EN and RU)

- Max width: 380px → 340px
- Letter key flex: 9% → 8%
- Key height: 48px → 42px
- Font sizes slightly reduced
- Russian 12-key row now fits on narrow screens

Co-Authored-By: Claude <noreply@anthropic.com>
Oleg Panashchenko 2 недель назад
Родитель
Сommit
8713d85c7d
1 измененных файлов с 4 добавлено и 4 удалено
  1. 4 4
      client/src/components/Keyboard.tsx

+ 4 - 4
client/src/components/Keyboard.tsx

@@ -14,7 +14,7 @@ interface KeyboardProps {
 export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
   const m = getMessages();
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', alignItems: 'center', marginTop: '12px', width: '95vw', maxWidth: '380px', margin: '12px auto 0' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '5px', alignItems: 'center', marginTop: '12px', width: '95vw', maxWidth: '340px', margin: '12px auto 0' }}>
       {m.keyboardRows.map((row, rowIdx) => (
         <div key={rowIdx} style={{ display: 'flex', gap: '4px', width: '100%', justifyContent: 'center' }}>
           {row.map((key) => {
@@ -25,7 +25,7 @@ export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
             const bg = color ? COLOR_MAP[color] : '#d3d6da';
             const fg = color ? '#fff' : '#000';
             const label = isBackspace ? m.backspaceLabel : key.toUpperCase();
-            const flexBasis = isSpecial ? '15%' : '9%';
+            const flexBasis = isSpecial ? '15%' : '8%';
 
             return (
               <div
@@ -33,13 +33,13 @@ export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
                 onClick={() => onKeyPress(isBackspace ? m.keyBackspace : key)}
                 style={{
                   flex: `0 0 ${flexBasis}`,
-                  height: '48px',
+                  height: '42px',
                   backgroundColor: bg,
                   color: fg,
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  fontSize: isSpecial ? '0.75rem' : '0.85rem',
+                  fontSize: isSpecial ? '0.7rem' : '0.78rem',
                   fontWeight: 'bold',
                   borderRadius: '4px',
                   cursor: 'pointer',