From a34acab5641bc197627ca3b1bfca1bae1e8f5b4b Mon Sep 17 00:00:00 2001
From: Sriram Thiagarajan <sri.sjc@gmail.com>
Date: Wed, 11 Oct 2023 22:35:35 +0530
Subject: [PATCH] make UI work better on smaller screens

---
 src/lib/components/Footer.svelte     |  2 +-
 src/lib/components/GameBoard.svelte  |  2 +-
 src/lib/components/GameHeader.svelte | 11 ++++++++++-
 src/lib/components/Logo.svelte       |  2 +-
 src/routes/+layout.svelte            | 19 +++++++++++++++++++
 5 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 8b6920f..6efaaf7 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,5 +1,5 @@
 <footer>
-	Built with&nbsp;<a href="https://kit.svelte.dev/" rel="noopener" target="_blank">SvelteKit</a
+	Built&nbsp;with&nbsp;<a href="https://kit.svelte.dev/" rel="noopener" target="_blank">SvelteKit</a
 	>&nbsp;and&nbsp;
 	<a href="https://www.partykit.io/" rel="noopener" target="_blank">PartyKit</a>&nbsp;by&nbsp;<a
 		href="https://twitter.com/tsriram"
diff --git a/src/lib/components/GameBoard.svelte b/src/lib/components/GameBoard.svelte
index 4f877e7..82e8e5f 100644
--- a/src/lib/components/GameBoard.svelte
+++ b/src/lib/components/GameBoard.svelte
@@ -80,7 +80,7 @@
 		--column-gap: 12px;
 		--row-gap: 20px;
 		--grid-padding: 16px;
-		--column-size: 40px;
+		--column-size: 32px;
 		display: grid;
 		padding: var(--grid-padding);
 		width: fit-content;
diff --git a/src/lib/components/GameHeader.svelte b/src/lib/components/GameHeader.svelte
index 409da15..32601e8 100644
--- a/src/lib/components/GameHeader.svelte
+++ b/src/lib/components/GameHeader.svelte
@@ -16,8 +16,17 @@
 <style>
 	.game-header {
 		display: flex;
-		justify-content: space-between;
+		flex-direction: column;
+		gap: 2rem;
+		align-items: center;
 		margin: 2rem 0;
 		font-size: 1.5rem;
 	}
+	@media (min-width: 720px) {
+		.game-header {
+			flex-direction: row;
+			justify-content: space-between;
+			gap: revert;
+		}
+	}
 </style>
diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo.svelte
index fe9cf6b..121be85 100644
--- a/src/lib/components/Logo.svelte
+++ b/src/lib/components/Logo.svelte
@@ -274,7 +274,7 @@
 
 <style>
 	.logo {
-		max-width: 70%;
+		max-width: max(50%, 240px);
 	}
 	@media (min-width: 720px) {
 		.logo {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index da44c3a..16baa72 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,6 +10,10 @@
 
 <InitialThemeSetter />
 <MetaTags />
+<div class="small-screen">
+	<p>Screen size not supported :(</p>
+	<p>Please use a larger screen to play.</p>
+</div>
 <div class="wrapper">
 	<header class="header">
 		<div class="logo-container">
@@ -27,6 +31,9 @@
 </div>
 
 <style>
+	.small-screen {
+		display: none;
+	}
 	.wrapper {
 		display: flex;
 		flex-direction: column;
@@ -36,6 +43,18 @@
 		margin: auto;
 		padding: 0 2rem;
 	}
+	@media (max-width: 359px) {
+		.wrapper {
+			display: none;
+		}
+		.small-screen {
+			display: flex;
+			flex-direction: column;
+			margin-top: 4rem;
+			align-items: center;
+			justify-content: center;
+		}
+	}
 	.header {
 		margin: 2rem 0;
 		display: flex;