refac: styling

src/lib/components/chat/MessageInput.svelte

@@ -389,7 +389,7 @@
 	</div>
 {/if}
 
-<div class="w-full">
+<div class="w-full absolute bottom-0">
 	<div class="px-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
 		<div class="flex flex-col max-w-3xl w-full">
 			<div class="relative">

src/lib/components/chat/Messages.svelte

@@ -277,7 +277,7 @@
 	// };
 </script>
 
-<div class="h-full">
+<div class="h-full flex">
 	{#if messages.length == 0}
 		<Placeholder
 			models={selectedModels}
@@ -297,7 +297,7 @@
 			}}
 		/>
 	{:else}
-		<div class="pt-2 pb-10">
+		<div class="pt-2 pb-28">
 			{#key chatId}
 				{#each messages as message, messageIdx}
 					<div class=" w-full">
@@ -355,7 +355,7 @@
 				{/each}
 
 				{#if bottomPadding}
-					<div class=" mb-10" />
+					<div class="  mb-20" />
 				{/if}
 			{/key}
 		</div>

src/lib/components/chat/Messages/Placeholder.svelte

@@ -24,9 +24,8 @@
 </script>
 
 {#if models.length > 0}
-	<div class=" text-center py-24 md:py-36">
+	<div class="m-auto w-full max-w-3xl px-8 pb-24">
-		<div class="m-auto max-w-3xl px-8">
+		<div class="flex justify-start">
-			<div class="flex justify-start mt-8">
 			<div class="flex -space-x-4 mb-0.5">
 				{#each models as model, modelIdx}
 					<button
@@ -83,9 +82,8 @@
 			</div>
 		</div>
 
-			<div class=" max-w-full">
+		<div class=" w-full">
 			<Suggestions {suggestionPrompts} {submitPrompt} />
 		</div>
 	</div>
-	</div>
 {/if}