christophe/chesscubing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Retablit le scroll mobile sur chrono et cube

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 18:06:16 +02:00
parent 9444b9b64f
commit dab6a517e3
1 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
styles.css
View File

@@ -2132,29 +2132,31 @@ textarea:focus {
} }
} }
/* Lock chrono and cube to the visual viewport to avoid iOS bottom gaps. */ /* Let chrono and cube scroll naturally on iPhone while still filling the viewport. */
body[data-page="chrono"], body[data-page="chrono"].phase-body,
body[data-page="cube"] { body[data-page="cube"].phase-body {
position: fixed; position: static;
inset: 0; inset: auto;
width: 100%; width: auto;
min-height: var(--app-viewport-height, 100dvh); min-height: var(--app-viewport-height, 100dvh);
height: var(--app-viewport-height, 100dvh); height: auto;
max-height: var(--app-viewport-height, 100dvh); max-height: none;
overflow: hidden; overflow-x: hidden;
overscroll-behavior: none; overflow-y: auto;
overscroll-behavior: auto;
-webkit-overflow-scrolling: touch;
} }
body[data-page="chrono"] .chrono-stage, body[data-page="chrono"] .chrono-stage,
body[data-page="cube"] .cube-shell { body[data-page="cube"] .cube-shell {
position: absolute; position: relative;
inset: 0; inset: auto;
width: 100%; width: min(1400px, 100%);
min-width: 0; min-width: 0;
margin: 0; margin: 0 auto;
min-height: 100%; min-height: var(--app-viewport-height, 100dvh);
height: 100%; height: auto;
max-height: 100%; max-height: none;
display: grid; display: grid;
grid-template-rows: auto auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
gap: 0.55rem; gap: 0.55rem;
@@ -2163,13 +2165,13 @@ body[data-page="cube"] .cube-shell {
calc(var(--safe-right) + 0.5rem) calc(var(--safe-right) + 0.5rem)
calc(var(--safe-bottom) + 0.55rem) calc(var(--safe-bottom) + 0.55rem)
calc(var(--safe-left) + 0.5rem); calc(var(--safe-left) + 0.5rem);
overflow: hidden; overflow: visible;
} }
body[data-page="chrono"] .faceoff-board, body[data-page="chrono"] .faceoff-board,
body[data-page="cube"] .faceoff-board { body[data-page="cube"] .faceoff-board {
min-height: 0; min-height: 0;
height: 100%; height: auto;
align-self: stretch; align-self: stretch;
} }
@@ -2192,7 +2194,7 @@ body[data-page="chrono"] .zone-inner {
body[data-page="chrono"] .zone-button { body[data-page="chrono"] .zone-button {
min-height: 0; min-height: 0;
height: 100%; height: auto;
flex: 1 1 auto; flex: 1 1 auto;
} }