Merge pull request #761 from ollama-webui/styling

fix: styling

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}

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">

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'}"
 	>

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