fix: prevent stepper markers from overflowing on mobile

Remove min-width: 44px and vertical centering override from .progress-dot
in the mobile breakpoint, which caused 9 dots to overflow the viewport
(9x44px = 396px > 374px available). Also add a 480px breakpoint with
smaller 28px dots for narrow phones like iPhone SE.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-14 17:16:08 +09:00
parent cb74569c97
commit 7d06f51740

View File

@@ -1121,11 +1121,7 @@ body.umzugsliste-standalone:has(.palette-c) {
}
.progress-dot {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.dot-label {
@@ -1156,3 +1152,19 @@ body.umzugsliste-standalone:has(.palette-c) {
display: block;
}
}
@media (max-width: 480px) {
.progress-bar {
padding: 0 4px;
}
.dot-number {
width: 28px;
height: 28px;
font-size: 0.65rem;
}
.progress-track {
top: 14px;
}
}