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}

src/lib/components/layout/Navbar.svelte

@@ -27,10 +27,7 @@
 
 <ShareChatModal bind:show={showShareChatModal} chatId={$chatId} />
 <nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-30">
-	<div
+	<div class=" flex max-w-full w-full mx-auto px-6 pt-1">
-		class=" flex {$settings?.fullScreenMode ?? null ? 'max-w-full' : 'max-w-3xl'} 
-		 w-full mx-auto px-5"
-	>
 		<div class="flex items-center w-full max-w-full">
 			<div class="flex-1 overflow-hidden max-w-full">
 				{#if showModelSelector}

src/routes/(app)/+page.svelte

@@ -15,7 +15,8 @@
 		chatId,
 		config,
 		WEBUI_NAME,
-		tags as _tags
+		tags as _tags,
+		showSidebar
 	} from '$lib/stores';
 	import { copyToClipboard, splitStream } from '$lib/utils';
 
@@ -838,7 +839,11 @@
 	</title>
 </svelte:head>
 
-<div class="h-screen max-h-[100dvh] w-full flex flex-col">
+<div
+	class="min-h-screen max-h-screen {$showSidebar
+		? 'lg:max-w-[calc(100%-260px)]'
+		: ''} w-full max-w-full flex flex-col"
+>
 	<Navbar
 		{title}
 		bind:selectedModels
@@ -849,7 +854,7 @@
 	/>
 	<div class="flex flex-col flex-auto">
 		<div
-			class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
+			class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full"
 			id="messages-container"
 			bind:this={messagesContainerElement}
 			on:scroll={(e) => {

src/routes/(app)/c/[id]/+page.svelte

@@ -859,8 +859,8 @@
 {#if loaded}
 	<div
 		class="min-h-screen max-h-screen {$showSidebar
-			? ' lg:max-w-[calc(100%-260px)]'
+			? 'lg:max-w-[calc(100%-260px)]'
-			: ''} max-w-full flex flex-col"
+			: ''} w-full max-w-full flex flex-col"
 	>
 		<Navbar
 			{title}