Fix score cube overflow on mobile

Add max-width constraints to prevent the score cube from expanding
its container on narrow viewports while preserving its natural
200x200 size on desktop.
This commit is contained in:
Christian Semmler 2026-01-31 14:31:54 -08:00
parent 52769bbe1b
commit aac1b63b7c
No known key found for this signature in database
GPG Key ID: 086DAA1360BEEE5C
2 changed files with 4 additions and 0 deletions

View File

@ -26,5 +26,6 @@
.scores-editor { .scores-editor {
display: flex; display: flex;
justify-content: center; justify-content: center;
max-width: 100%;
} }
</style> </style>

View File

@ -165,6 +165,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
min-width: 0;
} }
.score-cube-header { .score-cube-header {
@ -176,6 +177,7 @@
cursor: pointer; cursor: pointer;
border-radius: 8px; border-radius: 8px;
margin-bottom: 12px; margin-bottom: 12px;
max-width: 100%;
} }
canvas.hidden { canvas.hidden {
@ -193,6 +195,7 @@
justify-content: center; justify-content: center;
width: 200px; width: 200px;
height: 200px; height: 200px;
max-width: 100%;
padding-top: 20px; padding-top: 20px;
color: var(--color-text-muted, #888); color: var(--color-text-muted, #888);
font-size: 0.9em; font-size: 0.9em;