fix: styling

src/lib/components/chat/MessageInput/Suggestions.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Bolt from '$lib/components/icons/Bolt.svelte';
+	import { onMount } from 'svelte';
 
 	export let submitPrompt: Function;
 	export let suggestionPrompts = [];
@@ -12,6 +13,21 @@
 	// suggestionPrompts.length <= 4
 	// 	? suggestionPrompts
 	// 	: suggestionPrompts.sort(() => Math.random() - 0.5).slice(0, 4);
+
+	onMount(() => {
+		const containerElement = document.getElementById('suggestions-container');
+
+		if (containerElement) {
+			containerElement.addEventListener('wheel', function (event) {
+				if (event.deltaY !== 0) {
+					// If scrolling vertically, prevent default behavior
+					event.preventDefault();
+					// Adjust horizontal scroll position based on vertical scroll
+					containerElement.scrollLeft += event.deltaY;
+				}
+			});
+		}
+	});
 </script>
 
 {#if prompts.length > 0}
@@ -22,7 +38,10 @@
 {/if}
 
 <div class="w-full">
-	<div class="relative w-full flex gap-2 snap-x snap-mandatory overflow-x-auto tabs">
+	<div
+		class="relative w-full flex gap-2 snap-x snap-mandatory md:snap-none overflow-x-auto tabs"
+		id="suggestions-container"
+	>
 		{#each prompts as prompt, promptIdx}
 			<div class="snap-center shrink-0">
 				<button

src/lib/components/chat/Messages.svelte

@@ -240,7 +240,7 @@
 	};
 </script>
 
-<div class="h-full flex">
+<div class="h-full flex mb-16">
 	{#if messages.length == 0}
 		<Placeholder
 			models={selectedModels}

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

@@ -32,7 +32,7 @@
 </script>
 
 {#key mounted}
-	<div class="m-auto w-full max-w-3xl px-8 pb-32">
+	<div class="m-auto w-full max-w-3xl px-8 lg:px-0 pb-16">
 		<div class="flex justify-start">
 			<div class="flex -space-x-4 mb-1" in:fade={{ duration: 200 }}>
 				{#each models as model, modelIdx}