From 0e8765a7636affad459c5f9a16ae2ffd00706aec Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 16 Feb 2024 13:23:11 -0800
Subject: [PATCH 1/3] fix: mobile viewport

---
 src/lib/components/layout/Sidebar.svelte | 4 ++--
 src/routes/(app)/+page.svelte            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 6136b19e4..7fc699131 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -87,13 +87,13 @@
 
 <div
 	bind:this={navElement}
-	class="h-screen {show
+	class="h-screen max-h-[100dvh] {show
 		? ''
 		: '-translate-x-[260px] w-[0px]'}  w-[260px] min-w[260px] bg-black text-gray-200 shadow-2xl text-sm transition z-40 fixed top-0 left-0 lg:relative
         "
 >
 	<div
-		class="py-2.5 my-auto flex flex-col justify-between h-screen w-[260px] {show
+		class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] {show
 			? ''
 			: 'invisible'}"
 	>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 1dd6319bc..0840300b8 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -787,7 +787,7 @@
 	};
 </script>
 
-<div class="min-h-screen max-h-screen w-full flex flex-col">
+<div class="h-screen max-h-[100dvh] w-full flex flex-col">
 	<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
 	<div class="flex flex-col flex-auto">
 		<div

From 62bb3043c5c2d96b5727d14592de3493139e890e Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 16 Feb 2024 13:34:31 -0800
Subject: [PATCH 2/3] fix: styling

---
 src/lib/components/chat/Messages/ResponseMessage.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 96a9f0097..ab6f66a12 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -288,7 +288,7 @@
 				<Skeleton />
 			{:else}
 				<div
-					class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-6 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
+					class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-8 prose-li:-mb-4 whitespace-pre-line"
 				>
 					<div>
 						{#if edit === true}
@@ -366,7 +366,7 @@
 
 								{#if message.done}
 									<div
-										class=" flex justify-start space-x-1 overflow-x-auto buttons text-gray-700 dark:text-gray-500"
+										class=" flex justify-start space-x-1 -mt-1 overflow-x-auto buttons text-gray-700 dark:text-gray-500"
 									>
 										{#if siblings.length > 1}
 											<div class="flex self-center min-w-fit">

From 99faf9032488190f2eb14c3506e5df3aa37af534 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 16 Feb 2024 13:39:32 -0800
Subject: [PATCH 3/3] fix: prompt suggestions styling

---
 src/lib/components/chat/MessageInput/Suggestions.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/Suggestions.svelte b/src/lib/components/chat/MessageInput/Suggestions.svelte
index 19ef98d28..ef6b9e975 100644
--- a/src/lib/components/chat/MessageInput/Suggestions.svelte
+++ b/src/lib/components/chat/MessageInput/Suggestions.svelte
@@ -12,7 +12,9 @@
 
 <div class=" flex flex-wrap-reverse mb-3 md:p-1 text-left w-full">
 	{#each prompts as prompt, promptIdx}
-		<div class="{promptIdx > 1 ? 'hidden sm:inline-flex' : ''} basis-full sm:basis-1/2 p-[5px]">
+		<div
+			class="{promptIdx > 1 ? 'hidden sm:inline-flex' : ''} basis-full sm:basis-1/2 p-[5px] px-2"
+		>
 			<button
 				class=" flex-1 flex justify-between w-full h-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-800 rounded-lg transition group"
 				on:click={() => {
@@ -22,7 +24,7 @@
 				<div class="flex flex-col text-left self-center">
 					{#if prompt.title && prompt.title[0] !== ''}
 						<div class="text-sm font-medium dark:text-gray-300">{prompt.title[0]}</div>
-						<div class="text-sm text-gray-500">{prompt.title[1]}</div>
+						<div class="text-sm text-gray-500 line-clamp-1">{prompt.title[1]}</div>
 					{:else}
 						<div class=" self-center text-sm font-medium dark:text-gray-300 line-clamp-2">
 							{prompt.content}