Mobile fixes

islands/Chat.tsx

@@ -17,10 +17,12 @@ export default function Chat() {
   useEffect(() => {
     if (!username) {
       const randomNum = Math.floor(Math.random() * 10000);
-      setUsername(`User${randomNum}`);
+      setUsername(`HumanGuest${randomNum}`);
     }
 
-    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsProtocol = globalThis.location.protocol === "https:"
+      ? "wss:"
+      : "ws:";
     const ws = new WebSocket(
       `${wsProtocol}//${globalThis.location.host}/api/chat`,
     );
@@ -77,7 +79,7 @@ export default function Chat() {
   };
 
   return (
-    <div class="w-full max-w-4xl mx-auto bg-[#1E2127] rounded-lg shadow-lg overflow-hidden border border-gray-800 flex flex-col h-[calc(100vh-180px)] md:h-[600px]">
+    <div class="w-full max-w-4xl mx-auto bg-[#1E2127] rounded-lg shadow-lg overflow-hidden border border-gray-800 flex flex-col h-[70vh]">
       {/* Header */}
       <div class="p-4 bg-secondary text-white">
         <h2 class="text-2xl font-bold">Live Chat</h2>
@@ -88,7 +90,6 @@ export default function Chat() {
         </p>
       </div>
 
-      {/* Chat messages area */}
       <div
         id="chat-messages"
         class="flex-grow overflow-y-auto bg-[#1E2127] text-gray-300 p-4"
@@ -96,7 +97,7 @@ export default function Chat() {
         {messages.length === 0
           ? (
             <p class="text-center text-gray-500 py-8">
-              No messages yet. Be the first to chat!
+              No messages yet.
             </p>
           )
           : (
@@ -132,7 +133,6 @@ export default function Chat() {
           )}
       </div>
 
-      {/* Input area */}
       <div class="p-3 border-t border-gray-800 pb-6 md:pb-3">
         <form onSubmit={sendMessage} class="relative">
           <input
@@ -152,7 +152,7 @@ export default function Chat() {
           </button>
         </form>
         <p class="mt-2 text-xs text-gray-500">
-          You are chatting as{" "}
+          You are connected as{" "}
           <span class="font-medium text-gray-400">{username}</span>
         </p>
       </div>

routes/chat.tsx

@@ -14,7 +14,7 @@ export default function ChatPage() {
         <Chat />
       </div>
 
-      <div class="mt-4 text-center text-xs text-gray-500 mb-20">
+      <div class="mt-4 text-center text-xs text-gray-500">
         <p>
           This is an ephemeral chat room. Messages are only visible to users
           currently online and aren't stored after you leave.