From e9d4807b0edf83e7d41790634f57248fa0111b95 Mon Sep 17 00:00:00 2001
From: Daniel Metcalfe <mrdanielmetcalfe@gmail.com>
Date: Thu, 25 Apr 2024 12:55:13 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Invite=20link=20overflowing=20on?=
 =?UTF-8?q?=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Inviter.svelte | 30 ++++++++++++++++--------------
 src/lib/Page.svelte    |  1 +
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/lib/Inviter.svelte b/src/lib/Inviter.svelte
index a001d85..ea83dd6 100644
--- a/src/lib/Inviter.svelte
+++ b/src/lib/Inviter.svelte
@@ -61,28 +61,30 @@
   }
 </script>
 
-<div>
-  <h1>Copy the invite link and wait for others to join</h1>
-  <form style:text-align="center" method="dialog">
-    <input id="invite-url" readonly type="url" value={inviteUrl} />
-    <Button on:click={share} type="success">
-      <ShareIcon />
-    </Button>
-  </form>
-</div>
+<h1>Copy the invite link and wait for others to join</h1>
+<form style:text-align="center" method="dialog">
+  <input id="invite-url" readonly type="url" value={inviteUrl} />
+  <Button on:click={share} type="success">
+    <ShareIcon />
+  </Button>
+</form>
 
 <style>
   h1 {
     font-size: 1.61em;
-    margin: 2rem 0 1rem 0;
   }
 
-  #invite-url {
-    text-align: center;
-    width: 45ch;
+  form {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+    margin: 1rem;
+    width: 100%;
   }
 
   input {
-    max-width: 100%;
+    flex-grow: 1;
+    max-width: 45ch;
+    text-align: center;
   }
 </style>
diff --git a/src/lib/Page.svelte b/src/lib/Page.svelte
index 7633ae8..8a356eb 100644
--- a/src/lib/Page.svelte
+++ b/src/lib/Page.svelte
@@ -33,6 +33,7 @@
     flex-grow: 1;
     justify-content: center;
     margin: auto;
+    max-width: 100vw;
     padding: 1rem;
     position: relative;
   }