Add responsive mobile and high-zoom support

Author: VolksRat71

src/app.css

@@ -28,13 +28,45 @@
 	--radius-sm: 4px;
 	--radius-md: 8px;
 	--radius-lg: 12px;
+
+	/* Responsive spacing */
+	--spacing-xs: 0.25rem;
+	--spacing-sm: 0.5rem;
+	--spacing-md: 1rem;
+	--spacing-lg: 1.5rem;
+	--spacing-xl: 2rem;
+
+	/* Responsive content sizing */
+	--content-max-width: 1400px;
+	--browser-height: 320px;
+	--animation-container-padding: 1.5rem;
 }
 
 html {
 	font-size: 16px;
 	scroll-behavior: smooth;
 }
 
+/* Responsive font sizing for high zoom levels */
+@media (max-width: 480px) {
+	:root {
+		--browser-height: 280px;
+		--animation-container-padding: 0.75rem;
+	}
+}
+
+@media (min-width: 1800px) {
+	:root {
+		--content-max-width: 1600px;
+	}
+}
+
+@media (min-width: 2400px) {
+	:root {
+		--content-max-width: 1800px;
+	}
+}
+
 body {
 	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 	background: var(--bg-dark);

src/lib/components/BrowserMockup.svelte

@@ -35,6 +35,7 @@
 		border-radius: var(--radius-md);
 		overflow: hidden;
 		border: 1px solid var(--border);
+		width: 100%;
 	}
 
 	.browser-window.malicious {
@@ -57,6 +58,7 @@
 	.browser-dots {
 		display: flex;
 		gap: 6px;
+		flex-shrink: 0;
 	}
 
 	.dot {
@@ -76,6 +78,15 @@
 		border-radius: 4px;
 		font-size: 0.75rem;
 		color: var(--text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
+	.url-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.malicious-url {
@@ -87,9 +98,43 @@
 	}
 
 	.browser-content {
-		height: 320px;
+		height: var(--browser-height, 320px);
 		background: #fff;
 		position: relative;
 		overflow: hidden;
 	}
+
+	/* Mobile adjustments */
+	@media (max-width: 600px) {
+		.browser-chrome {
+			padding: 6px 8px;
+			gap: 6px;
+		}
+
+		.dot {
+			width: 8px;
+			height: 8px;
+		}
+
+		.browser-url {
+			padding: 3px 8px;
+			font-size: 0.65rem;
+		}
+	}
+
+	@media (max-width: 380px) {
+		.dot {
+			width: 6px;
+			height: 6px;
+		}
+
+		.browser-dots {
+			gap: 4px;
+		}
+
+		.browser-url {
+			font-size: 0.6rem;
+			padding: 2px 6px;
+		}
+	}
 </style>

src/lib/components/Header.svelte

@@ -12,9 +12,9 @@
 <style>
 	.header {
 		text-align: center;
-		padding: 2rem 1rem;
+		padding: var(--spacing-xl) var(--spacing-md);
 		border-bottom: 1px solid var(--border);
-		margin-bottom: 1.5rem;
+		margin-bottom: var(--spacing-lg);
 	}
 
 	.header h1 {
@@ -37,4 +37,29 @@
 		font-size: 1rem;
 		margin-top: 0.5rem;
 	}
+
+	@media (max-width: 600px) {
+		.header {
+			padding: var(--spacing-lg) var(--spacing-sm);
+			margin-bottom: var(--spacing-md);
+		}
+
+		.header h1 {
+			font-size: 1.5rem;
+		}
+
+		.subtitle {
+			font-size: 0.85rem;
+		}
+	}
+
+	@media (max-width: 380px) {
+		.header h1 {
+			font-size: 1.25rem;
+		}
+
+		.subtitle {
+			font-size: 0.75rem;
+		}
+	}
 </style>

src/lib/components/StepHeader.svelte

@@ -22,7 +22,7 @@
 <style>
 	.step-header {
 		text-align: center;
-		margin-bottom: 1.5rem;
+		margin-bottom: var(--spacing-lg);
 	}
 
 	.step-header h2 {
@@ -32,6 +32,7 @@
 		align-items: center;
 		justify-content: center;
 		gap: 0.5rem;
+		flex-wrap: wrap;
 	}
 
 	.step-desc {
@@ -53,4 +54,34 @@
 		border-radius: var(--radius-sm);
 		font-size: 0.8rem;
 	}
+
+	@media (max-width: 600px) {
+		.step-header {
+			margin-bottom: var(--spacing-md);
+		}
+
+		.step-header h2 {
+			font-size: 1.2rem;
+			gap: 0.35rem;
+		}
+
+		.step-desc {
+			font-size: 0.85rem;
+		}
+
+		.severity {
+			font-size: 0.7rem;
+			padding: 2px 6px;
+		}
+	}
+
+	@media (max-width: 380px) {
+		.step-header h2 {
+			font-size: 1.1rem;
+		}
+
+		.step-desc {
+			font-size: 0.8rem;
+		}
+	}
 </style>

src/lib/components/StepNav.svelte

@@ -43,17 +43,20 @@
 		top: 0;
 		z-index: 100;
 		background: var(--bg-dark);
-		padding: 0.75rem 0;
+		padding: 0.75rem var(--spacing-sm);
 		border-bottom: 1px solid var(--border);
-		margin-bottom: 1.5rem;
+		margin-bottom: var(--spacing-lg);
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
 	}
 
 	.step-indicators {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		gap: 0.25rem;
-		flex-wrap: wrap;
+		flex-wrap: nowrap;
+		min-width: max-content;
 	}
 
 	.step-btn {
@@ -69,6 +72,7 @@
 		transition: all 0.2s;
 		min-width: 90px;
 		color: var(--text-primary);
+		flex-shrink: 0;
 	}
 
 	.step-btn:hover {
@@ -106,11 +110,61 @@
 	.step-label {
 		font-size: 0.7rem;
 		color: var(--text-muted);
+		white-space: nowrap;
 	}
 
 	.step-connector {
 		width: 20px;
 		height: 2px;
 		background: var(--border);
+		flex-shrink: 0;
+	}
+
+	/* Mobile: horizontal scroll with smaller buttons */
+	@media (max-width: 600px) {
+		.step-nav {
+			padding: 0.5rem;
+			margin-bottom: var(--spacing-md);
+		}
+
+		.step-indicators {
+			justify-content: flex-start;
+			padding: 0 0.25rem;
+		}
+
+		.step-btn {
+			min-width: 70px;
+			padding: 0.4rem 0.5rem;
+		}
+
+		.step-num {
+			width: 20px;
+			height: 20px;
+			font-size: 0.65rem;
+		}
+
+		.step-label {
+			font-size: 0.6rem;
+		}
+
+		.step-connector {
+			width: 12px;
+		}
+	}
+
+	/* Very small screens: even more compact */
+	@media (max-width: 380px) {
+		.step-btn {
+			min-width: 60px;
+			padding: 0.35rem 0.4rem;
+		}
+
+		.step-label {
+			font-size: 0.55rem;
+		}
+
+		.step-connector {
+			width: 8px;
+		}
 	}
 </style>

src/lib/components/StepNavigation.svelte

@@ -34,7 +34,8 @@
 		display: flex;
 		justify-content: center;
 		gap: 1rem;
-		margin-top: 1.5rem;
+		margin-top: var(--spacing-lg);
+		flex-wrap: wrap;
 	}
 
 	.btn-next, .btn-prev {
@@ -81,4 +82,23 @@
 	.btn-prev:hover {
 		border-color: var(--accent-blue);
 	}
+
+	@media (max-width: 600px) {
+		.step-navigation {
+			gap: 0.75rem;
+			margin-top: var(--spacing-md);
+		}
+
+		.btn-next, .btn-prev {
+			padding: 0.6rem 1rem;
+			font-size: 0.8rem;
+		}
+	}
+
+	@media (max-width: 380px) {
+		.btn-next, .btn-prev {
+			padding: 0.5rem 0.75rem;
+			font-size: 0.75rem;
+		}
+	}
 </style>