Fix responsiveness on presence-example

Author: acupofjose

Examples/PresenceExample/Pages/Index.razor

@@ -16,16 +16,16 @@
 <div class="flex justify-between">
 	<div class="dark:bg-brand-1200 bg-scale-200 border border-scale-500 dark:border-scale-300 p-3 rounded-md space-y-8 transition-all max-h-[70px] duration-500 overflow-hidden shadow-2xl dark:shadow-lg">
 		<a href="https://github.com/supabase-community/supabase-csharp">
-			<img class="w-auto h-full" src="/logo.png" />
+			<img class="sm:w-300 xs:w-200 w-auto h-full" src="/logo.png" />
 		</a>
 	</div>
 
 	<a href="https://github.com/supabase-community/realtime-csharp/tree/master/Examples/PresenceExample">
-		<img class="w-8 h-8" src="/github-mark-white.png"/>
+		<img class="w-8 h-8" src="/github-mark-white.png" />
 	</a>
 </div>
 
-<div class="flex items-start flex-col">
+<div class="flex items-start flex-col pt-2">
 	@if (isConnected)
 	{
 		<Pill Text="Connected" />
@@ -50,17 +50,15 @@
 	}
 </div>
 
-<div class="grid grid-cols-6 gap-4 absolute bottom-10 w-full right-5 h-10">
-	<div class="col-end-7 col-span-2">
-
-		<InputText @ref="chatInput"
-				   @onfocus="HandleChatInputFocus"
-				   @onfocusout="HandleChatInputLostFocus"
-				   @bind-Value="chatMessage"
-				   placeholder="Send a message..."
-				   type="text"
-				   class="w-full bg-scale-500 h-10 rounded-md px-2.5" />
-	</div>
+<div class="flex absolute bottom-10 right-5 w-3/4 md:w-1/3 h-10">
+	<InputText @ref="chatInput"
+			   @onfocus="HandleChatInputFocus"
+			   @onfocusout="HandleChatInputLostFocus"
+			   @bind-Value="chatMessage"
+			   @oninput="@((e) => { chatMessage=(string?)e.Value ?? "";})"
+			   placeholder="Send a message..."
+			   type="text"
+			   class="w-full bg-scale-500 h-10 rounded-lg px-2.5" />
 </div>
 
 @code {

Examples/PresenceExample/Shared/MainLayout.razor

@@ -2,7 +2,7 @@
 
 <div class="h-screen w-screen p-4 flex flex-col justify-between relative max-h-screen max-w-screen overflow-hidden">
 	<div class="absolute h-full w-full left-0 top-0 pointer-events-none" style="z-index: -1; opacity: 0.15; background-size: 16px 16px; background-image: linear-gradient(to right, gray 1px, transparent 1px), linear-gradient(gray 1px, transparent 1px);"></div>
-	<div class="flex flex-col h-full justify-between">
+	<div class="flex flex-col h-full justify-start md:justify-between">
 		@Body
 	</div>
 	<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center space-x-2 pointer-events-none">