From 6e398f72da33eb72e3afe8815ab3c096a272e34b Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Thu, 14 Aug 2025 00:33:30 +0200
Subject: [PATCH] mobile layout server, sites & home route pages

---
 src/lib/components/ThumbnailButton.svelte | 11 +++++++++++
 src/routes/+layout.svelte                 |  9 +--------
 src/routes/+page.svelte                   |  2 +-
 src/routes/cluster/+page.svelte           |  5 ++++-
 src/routes/sites/+page.svelte             | 10 ++++++++++
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/ThumbnailButton.svelte b/src/lib/components/ThumbnailButton.svelte
index f17c87e..ba3968b 100644
--- a/src/lib/components/ThumbnailButton.svelte
+++ b/src/lib/components/ThumbnailButton.svelte
@@ -107,6 +107,17 @@
 			opacity: 0;
 		}
 
+		@media screen and (max-width: 750px) {
+			.title h2 {
+				padding: 0.6rem;
+				font-size: 1.2rem;
+			}
+
+			.image {
+				height: 5rem;
+			}
+		}
+
 		&:hover {
 			transform: translateY(-4px) translateX(-4px);
 			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 92705f2..921d3e7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -37,17 +37,10 @@
 
 		@media screen and (max-width: 750px) {
 			padding-top: 0;
-		}
-		/*
-		@media screen and (max-width: 750px) {
+
 			main {
 				--margin: 1rem;
 			}
-
-			:global(> .nav-wrapper) {
-				display: none;
-			}
 		}
-		*/
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8aeceea..c685ac6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -111,7 +111,7 @@
 	.shortcut-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-		grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 		gap: 1.2rem;
 		margin-top: 2rem;
 	}
diff --git a/src/routes/cluster/+page.svelte b/src/routes/cluster/+page.svelte
index f473587..0bbb030 100644
--- a/src/routes/cluster/+page.svelte
+++ b/src/routes/cluster/+page.svelte
@@ -81,13 +81,16 @@
 
 	.server-list {
 		display: grid;
-		--grid-tmpl-cols: repeat(2, 1fr);
+		--grid-tmpl-cols: repeat(1, 1fr);
 		--grid-gap: 0.5rem;
 		grid-template-columns: var(--grid-tmpl-cols, repeat(2, 1fr));
 		gap: var(--grid-gap, 0.5rem);
 
 		margin-bottom: 2rem;
 
+		@media screen and (min-width: 480px) {
+			--grid-tmpl-cols: repeat(2, 1fr);
+		}
 		@media screen and (min-width: 750px) {
 			--grid-tmpl-cols: repeat(2, 1fr);
 			--grid-gap: 1.25rem;
diff --git a/src/routes/sites/+page.svelte b/src/routes/sites/+page.svelte
index bbffe8a..2671b80 100644
--- a/src/routes/sites/+page.svelte
+++ b/src/routes/sites/+page.svelte
@@ -104,7 +104,9 @@
 			link={site.link}
 		/>
 	{/each}
+</div>
 
+<div class="section-wrapper full-width">
 	<Section
 		title="Expose HTTP traffic"
 		description="You can reach your Application on a specific Port you configure, redirecting all your domains to it. You can make it Private by disabling HTTP traffic."
@@ -137,6 +139,14 @@
 
 		@media screen and (max-width: 750px) {
 			grid-template-columns: repeat(2, 1fr);
+
+			&.full-width {
+				grid-template-columns: repeat(1, 1fr);
+			}
+		}
+
+		&:not(:first-of-type) {
+			margin-top: 4rem;
 		}
 	}
 </style>