Merge pull request #3 from angelicawill/2-fix-layout-problem

fix(ui): view correct layout in chat interface
nostrocket · May 17, 2024 · 247df3a · 247df3a
2 parents 0a8b18b + 09ea2dc
commit 247df3a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/src/app.html b/src/app.html
@@ -3,11 +3,11 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content, maximum-scale=1" />
 		<link rel=stylesheet href="//cdn.quilljs.com/1.3.6/quill.snow.css" async defer />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class=" bg-zinc-50 dark:bg-zinc-900 overflow-hidden">
-<div class="h-dvh w-screen">%sveltekit.body%</div>
+	<body data-sveltekit-preload-data="hover" class=" bg-zinc-50 dark:bg-zinc-900 overflow-hidden h-dvh">
+		<div class="h-full w-screen">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/ChatLayout.svelte b/src/lib/components/ChatLayout.svelte
@@ -18,11 +18,11 @@
 	export let hideFaucet = false;
 </script>
 
-<div class="flex flex-row">
+<div class="flex flex-row h-full">
 	<!-- Icon Sidebar -->
 	<div class="w-12 flex-shrink-0 block bg-orange-500 dark:bg-cyan-950">
-		<div class="flex flex-col bg-layer-2 relative h-dvh">
-			<div class="flex flex-1 flex-col overflow-hidden place-items-center">
+		<div class="flex flex-col bg-layer-2 relative h-full">
+			<div class="flex flex-1 flex-col overflow-x-hidden overflow-y-scroll no-scrollbar sm:overflow-hidden place-items-center">
 				<slot name="buttons" />
 				{#if !hideFaucet}
 					<Button
@@ -72,7 +72,7 @@
 	</div>
 
 	<div class="flex-1">
-		<div class="h-dvh flex-col">
+		<div class="flex-col h-full">
 			<!-- CONTENT-->
 			<div
 				class="h-full relative z-10 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"

diff --git a/src/lib/views/messages/Messages.svelte b/src/lib/views/messages/Messages.svelte
@@ -13,6 +13,7 @@
 	import { BloomFilter } from 'bloomfilter';
 	import type { NostrEvent } from 'nostr-tools';
 	import { ArrowTurnUpSolid } from 'svelte-awesome-icons';
+	import { onMount } from 'svelte';
 	import { derived, writable } from 'svelte/store';
 	import RenderKind1 from './RenderKind1.svelte';
 	import RenderKind1AsThreadHead from './RenderKind1AsThreadHead.svelte';
@@ -167,6 +168,23 @@
 	}
 
 	let eventID: string;
+
+	onMount(() => {
+		const handleResize = () => {
+			if (window.visualViewport) {
+				document.body.style.height = `${window.visualViewport.height}px`;
+				console.log('resize', window.visualViewport.height);
+			}
+		};
+
+		window.visualViewport?.addEventListener('resize', handleResize);
+
+		handleResize();
+
+		return () => {
+			window.visualViewport?.removeEventListener('resize', handleResize);
+		};
+	});
 </script>
 
 <div class=" hidden">{$shortListLength}</div>
@@ -203,7 +221,7 @@
 			<Coracle />
 		{/if}
 	</slot>
-	<div slot="input"><MessageInput /></div>
+	<div slot="input" class="w-full content-end"><MessageInput /></div>
 	<div slot="right">
 		<div class=" ml-2">
 			<h3>HUMBLE HORSE</h3>
@@ -267,15 +285,14 @@
 					let _ndk = new NDKSvelte({
 						explicitRelayUrls: ['ws://127.0.0.1:6969']
 					});
-					console.log(270)
-					 _ndk.connect().then(()=>{
-						console.log(271)
+					console.log(270);
+					_ndk.connect().then(() => {
+						console.log(271);
 						$FrontendDataStore.events.forEach((e) => {
-						let en = new NDKEvent(_ndk, e);
-						en.publish()
+							let en = new NDKEvent(_ndk, e);
+							en.publish();
+						});
 					});
-					 })
-
 				}}>Publish all events to local relay</Button
 			>
 			<br />