From 7d06f5174014a6d935a90c7ffcd2a531f6a3390d Mon Sep 17 00:00:00 2001
From: Viktor Miller <viktor.miller@vihais.com>
Date: Sat, 14 Feb 2026 17:16:08 +0900
Subject: [PATCH] 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>
---
 assets/css/form.css | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/assets/css/form.css b/assets/css/form.css
index 1a37180..ae51073 100644
--- a/assets/css/form.css
+++ b/assets/css/form.css
@@ -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;
+	}
+}