fix: improve Android tablet keyboard-safe layout
Use dynamic viewport sizing and keyboard-aware spacing to keep new-game inputs and navigation reachable in PWA landscape mode on Android tablets. Refs #30. Made-with: Cursor
This commit is contained in:
+10
-7
@@ -3,17 +3,13 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* Design system tokens */
|
||||
:root {
|
||||
--app-height: 100dvh;
|
||||
--keyboard-offset: 0px;
|
||||
/* Colors */
|
||||
--color-primary: #ff9800;
|
||||
--color-primary-hover: #ffa726;
|
||||
@@ -87,7 +83,7 @@
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -98,6 +94,13 @@ body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
min-height: var(--app-height);
|
||||
}
|
||||
|
||||
button, .btn, .button {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
/* Improved input styling for better tablet experience */
|
||||
|
||||
Reference in New Issue
Block a user