From 1c8195c1811e601067bcd4db9b06b599ea4841dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Mu=C5=A1tar?= <victor.mustar@gmail.com>
Date: Mon, 24 Apr 2023 18:35:21 +0200
Subject: [PATCH] Fix mobile height (#79)

* 100% screen on mobile

* examples size

* send button ios
---
 src/app.html                                    | 8 ++++----
 src/lib/components/chat/ChatInput.svelte        | 1 +
 src/lib/components/chat/ChatIntroduction.svelte | 6 +++---
 src/routes/+layout.svelte                       | 2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)
diff --git a/src/app.html b/src/app.html
index 0770a211aa4..fd4e1028674 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<title>HuggingChat</title>
 		<meta
 			name="description"
@@ -12,8 +12,8 @@
 		<meta property="og:image" content="%sveltekit.assets%/thumbnail.png" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
-		<div style="display: contents">%sveltekit.body%</div>
+	<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900 h-full">
+		<div class="contents h-full">%sveltekit.body%</div>
 	</body>
 	<script>
 		if (localStorage.theme === "dark") {
diff --git a/src/lib/components/chat/ChatInput.svelte b/src/lib/components/chat/ChatInput.svelte
index 9ad461b3c2f..4ce4e068872 100644
--- a/src/lib/components/chat/ChatInput.svelte
+++ b/src/lib/components/chat/ChatInput.svelte
@@ -28,6 +28,7 @@
 		style="min-height: {minHeight}; max-height: {maxHeight}">{value + "&nbsp;\n"}</pre>
 
 	<textarea
+		enterkeyhint="send"
 		tabindex="0"
 		rows="1"
 		class="absolute m-0 w-full h-full top-0 resize-none border-0 bg-transparent p-3 focus:ring-0 focus-visible:ring-0 dark:bg-transparent outline-none scrollbar-custom overflow-x-hidden overflow-y-scroll"
diff --git a/src/lib/components/chat/ChatIntroduction.svelte b/src/lib/components/chat/ChatIntroduction.svelte
index 0fb442f7c82..ca5a2cc2b30 100644
--- a/src/lib/components/chat/ChatIntroduction.svelte
+++ b/src/lib/components/chat/ChatIntroduction.svelte
@@ -68,7 +68,7 @@
 			<div class="grid lg:grid-cols-3 gap-3 lg:gap-5">
 				<button
 					type="button"
-					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
+					class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
 					on:click={() =>
 						dispatch(
 							"message",
@@ -79,7 +79,7 @@
 				</button>
 				<button
 					type="button"
-					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
+					class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
 					on:click={() =>
 						dispatch("message", "Code a snake game in python, the snake should be red")}
 				>
@@ -87,7 +87,7 @@
 				</button>
 				<button
 					type="button"
-					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
+					class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
 					on:click={() => dispatch("message", "How do I make a lemon cheesecake?")}
 				>
 					"Assist in a task"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5b935e31dc3..7642815e731 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -41,7 +41,7 @@
 </script>
 
 <div
-	class="grid h-screen w-screen grid-cols-1 grid-rows-[auto,1fr] md:grid-rows-[1fr] md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
+	class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] md:grid-rows-[1fr] md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
 >
 	<MobileNav
 		isOpen={isNavOpen}
