refactor: update ParticipantView Leave Group button and +page.svelte …

…for responsive screen (#105)

- Moved Leave Group button to be responsive, displaying differently on small and larger screens.
- Wrapped HostView and ParticipantView components in a div with margin for better layout consistency.

src/lib/components/session/ParticipantView.svelte

@@ -598,16 +598,6 @@
 								<span class="font-medium">Group </span>
 								<span class="text-lg">#{groupDoc.data.number}</span>
 							</div>
-							{#if $session?.status === 'preparing'}
-								<Button
-									color="red"
-									size="xs"
-									onclick={() => groupDoc?.id && handleLeaveGroup(groupDoc.id, user.uid)}
-								>
-									<LogOut class="mr-2 h-4 w-4" />
-									Leave Group
-								</Button>
-							{/if}
 						</div>
 						<div>
 							<h3 class="mb-2 font-medium">Members:</h3>
@@ -632,6 +622,27 @@
 								{/each}
 							</ul>
 						</div>
+						<div>
+							{#if $session?.status === 'preparing'}
+								<Button
+									color="red"
+									size="xs"
+									class="hidden sm:flex"
+									onclick={() => groupDoc?.id && handleLeaveGroup(groupDoc.id, user.uid)}
+								>
+									<LogOut class="mr-2 h-4 w-4" />
+									Leave Group
+								</Button>
+								<Button
+									color="red"
+									size="xs"
+									class="sm:hidden"
+									onclick={() => groupDoc?.id && handleLeaveGroup(groupDoc.id, user.uid)}
+								>
+									<LogOut class="h-4 w-4" />
+								</Button>
+							{/if}
+						</div>
 					</div>
 				{:else if $session?.status === 'preparing'}
 					<div class="mt-6 space-y-4">

src/routes/session/[id]/+page.svelte

@@ -15,7 +15,11 @@
 </svelte:head>
 
 {#if isHost}
-	<HostView {session} />
+	<div class="mx-4">
+		<HostView {session} />
+	</div>
 {:else}
-	<ParticipantView {session} user={data.user} />
+	<div class="mx-4">
+		<ParticipantView {session} user={data.user} />
+	</div>
 {/if}