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