improve mobile UI

demo.html

@@ -11,7 +11,15 @@
   <p>Below, we have inserted a <code>script</code> tag that should
   renter a Svelte component upon loading this page.</p>
 
-  <script src="public/bundle.js"></script>
+  <script
+  src="public/bundle.js"
+	data-chat-type="GLOBAL"
+	data-chat-tags="nostrica"
+	data-relays="ws://localhost:8080"
+></script>
+<link rel="stylesheet" href="public/bundle.css">
+  ></script>
+
 
   <p>This text will come after the embedded content.</p>
 </body>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nostri.chat",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",

src/ConnectedWidget.svelte

@@ -119,7 +119,7 @@
     function scrollDown() {
         animateScroll.scrollToBottom({
             container: document.getElementById('messages-container'),
-            offset: 500,
+            offset: 999999, // hack, oh well, browsers suck
             duration: 50
         })
     }
@@ -260,7 +260,8 @@
     {/if}
 {/if}
 
-<div id="messages-container" class="overflow-scroll">
+<div id="messages-container" class="overflow-auto -mx-4 px-4" style="height: 50vh; min-height: 300px;">
+    <div id="messages-container-inner">
         {#if $selectedMessage}
             <NostrNote event={getEventById($selectedMessage)} {responses} {websiteOwnerPubkey} />
         {:else}
@@ -272,6 +273,7 @@
             {/each}
         {/if}
     </div>
+</div>
 
 
 <div class="flex flex-col">

src/NostrNote.svelte

@@ -19,7 +19,7 @@
     const byWebsiteOwner = !!websiteOwnerPubkey === event.pubkey;
 
     $: profiles = $chatData.profiles;
-    $: displayName = profiles[event.pubkey] && profiles[event.pubkey].display_name || event.pubkey;
+    $: displayName = profiles[event.pubkey] && profiles[event.pubkey].display_name || `[${event.pubkey.slice(0, 6)}]`;
     $: nip05 = profiles[event.pubkey] && profiles[event.pubkey].nip05;
 
     $: profilePicture = profiles[event.pubkey] && profiles[event.pubkey].picture || `https://robohash.org/${event.pubkey}.png?set=set1`;
@@ -56,7 +56,7 @@
                 cursor-pointer
                 border border-slate-200
                 {$selectedMessage === event.id ? 'bg-purple-700 text-white' : 'bg-slate-50 text-gray-500 hover:bg-slate-100'}
-                p-4 py-2 overflow-scroll rounded-2xl
+                p-4 py-2 overflow-auto rounded-2xl
             " on:click|preventDefault={()=>{selectMessage(event.id)}}>
                 {event.content}
             </div>

src/Widget.svelte

@@ -28,7 +28,7 @@
     {#if showChat}
         <div class="
 			shadow-2xl
-            bg-white mb-5 w-96 max-w-screen-sm text-black rounded-xl p-5 overflow-scroll
+            bg-white mb-5 w-96 max-w-screen-sm text-black rounded-xl p-5
             {minimizeChat ? 'hidden' : ''}
         " style="max-height: 80vh;">
             {#if !dismissedIntro}

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Container from '../Container.svelte';
+	import Widget from '../Widget.svelte';
 	import { chatAdapter } from '$lib/store';
 
 	let chatStarted;
@@ -31,21 +32,21 @@
 </svelte:head>
 
 <section class="
-	min-h-screen
+	lg:min-h-screen
 	text-white
 	bg-gradient-to-b from-orange-500 to-orange-800
 ">
-	<div class="min-h-screen mx-auto w-full lg:max-w-7xl py-5 xl:py-10
+	<div class="lg:min-h-screen mx-auto w-full lg:max-w-7xl py-5 xl:py-10
-		flex flex-col lg:flex-row
+		flex flex-col md:flex-row
 		gap-20 items-center px-4 lg:px-0
 		relative
 	">
 		<div class="
-			md:w-3/5 grid grid-cols-1 gap-10
+			md:w-7/12 gap-10
 		">
 			<section id="hero" style="min-height: 50vh;">
 				<h1 class="
-					text-4xl md:text-6xl
+					text-6xl
 					font-black
 					my-2
 				">Nostri.chat</h1>
@@ -72,13 +73,16 @@
 		</div>
 
 		<div class="
-			flex flex-row items-center justify-center
+			flex-row items-center justify-center
-			min-h-screen fixed
+			min-h-screen
-		" style="margin-left: 50%;">
+			hidden md:flex
+			md:w-5/12
+		">
 			<div class="
 				shadow-2xl
-				bg-white mb-5 w-96 max-w-screen-sm text-black rounded-3xl p-5 overflow-scroll
+				bg-white mb-5 w-96 max-w-screen-sm text-black rounded-3xl p-5 overflow-auto
 				flex flex-col justify-end
+				fixed
 			" style="{chatStarted ? 'max-height: 80vh;' : 'padding: 4rem 2rem !important;'}">
 				<Container chatConfiguration={{
 					chatType,
@@ -99,9 +103,9 @@
 	flex flex-col lg:flex-row
 	gap-20 px-4 lg:px-0
 	" style="min-height: 50vh;">
-	<div class="md:w-8/12 lg:w-3/5 grid grid-cols-1 gap-8">
+	<div class="md:w-7/12 flex flex-col gap-8">
 		<div>
-			<h1 class="text-7xl font-black">
+			<h1 class="text-6xl lg:text-7xl font-black">
 				Innovative modes
 			</h1>
 
@@ -243,7 +247,7 @@
 	flex flex-col lg:flex-row
 	gap-20 items-center px-4 lg:px-0
 	" style="min-height: 50vh;">
-		<div class="md:w-3/5 grid grid-cols-1 gap-8">
+		<div class="md:w-4/5 lg:w-3/5 grid grid-cols-1 gap-8">
 
 			<div>
 				<h1 class="text-7xl font-black">
@@ -260,7 +264,7 @@
 			<pre class ="
 				p-4
 				bg-white
-				overflow-scroll
+				overflow-auto
 			">
 &lt;script
 	src="https://nostri.chat/public/bundle.js"
@@ -278,6 +282,25 @@
 	</div>
 </section>
 
+<div class="md:hidden">
+	<Widget chatConfiguration={{
+		chatType,
+		chatTags,
+		chatReferenceTags,
+	}} {websiteOwnerPubkey} {relays} bind:chatStarted={chatStarted} />
+</div>
+
+<footer class="py-6 bg-orange-900 font-mono text-white text-center mt-12 px-10">
+	<div class="flex justify-center flex-row">
+		<div class="text-sm">
+			NOSTRI.CHAT
+			by
+			<a class="text-purple-50 hover:text-orange-400" href="https://pablof7z.com">
+				@pablof7z
+			</a>
+		</div>
+	</div>
+</footer>
 
 <style>
 	/* div { border: solid red 1px; } */