Fix mobile height (huggingface#79)

* 100% screen on mobile * examples size * send button ios
EikeKohl · Apr 24, 2023 · 1c8195c · 1c8195c
1 parent 4dae10f
commit 1c8195c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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,15 +79,15 @@
 				</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")}
 				>
 					"Code a snake game"
 				</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
@@ -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}