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,68 +24,66 @@
 </script>
 
 {#if models.length > 0}
-	<div class=" text-center py-24 md:py-36">
-		<div class="m-auto max-w-3xl px-8">
-			<div class="flex justify-start mt-8">
-				<div class="flex -space-x-4 mb-0.5">
-					{#each models as model, modelIdx}
-						<button
-							on:click={() => {
-								selectedModelIdx = modelIdx;
-							}}
-						>
-							{#if model in modelfiles}
-								<img
-									src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
-									alt="modelfile"
-									class=" size-[2.7rem] rounded-full border-[1px] border-gray-200 dark:border-none"
-									draggable="false"
-								/>
-							{:else}
-								<img
-									src={$i18n.language === 'dg-DG'
-										? `/doge.png`
-										: `${WEBUI_BASE_URL}/static/favicon.png`}
-									class=" size-[2.7rem] rounded-full border-[1px] border-gray-200 dark:border-none"
-									alt="logo"
-									draggable="false"
-								/>
-							{/if}
-						</button>
-					{/each}
-				</div>
-			</div>
-			<div
-				class=" mt-2 mb-4 text-2xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
-			>
-				<div>
-					{#if modelfile}
-						<span class=" capitalize">
-							{modelfile.title}
-						</span>
-						<div class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400">
-							{modelfile.desc}
-						</div>
-						{#if modelfile.user}
-							<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
-								By <a href="https://openwebui.com/m/{modelfile.user.username}"
-									>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a
-								>
-							</div>
+	<div class="m-auto w-full max-w-3xl px-8 pb-24">
+		<div class="flex justify-start">
+			<div class="flex -space-x-4 mb-0.5">
+				{#each models as model, modelIdx}
+					<button
+						on:click={() => {
+							selectedModelIdx = modelIdx;
+						}}
+					>
+						{#if model in modelfiles}
+							<img
+								src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+								alt="modelfile"
+								class=" size-[2.7rem] rounded-full border-[1px] border-gray-200 dark:border-none"
+								draggable="false"
+							/>
+						{:else}
+							<img
+								src={$i18n.language === 'dg-DG'
+									? `/doge.png`
+									: `${WEBUI_BASE_URL}/static/favicon.png`}
+								class=" size-[2.7rem] rounded-full border-[1px] border-gray-200 dark:border-none"
+								alt="logo"
+								draggable="false"
+							/>
 						{/if}
-					{:else}
-						<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
-
-						<div class=" font-medium text-gray-400 dark:text-gray-500">
-							{$i18n.t('How can I help you today?')}
+					</button>
+				{/each}
+			</div>
+		</div>
+		<div
+			class=" mt-2 mb-4 text-2xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
+		>
+			<div>
+				{#if modelfile}
+					<span class=" capitalize">
+						{modelfile.title}
+					</span>
+					<div class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400">
+						{modelfile.desc}
+					</div>
+					{#if modelfile.user}
+						<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
+							By <a href="https://openwebui.com/m/{modelfile.user.username}"
+								>{modelfile.user.name ? modelfile.user.name : `@${modelfile.user.username}`}</a
+							>
 						</div>
 					{/if}
-				</div>
-			</div>
+				{:else}
+					<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
 
-			<div class=" max-w-full">
-				<Suggestions {suggestionPrompts} {submitPrompt} />
+					<div class=" font-medium text-gray-400 dark:text-gray-500">
+						{$i18n.t('How can I help you today?')}
+					</div>
+				{/if}
 			</div>
 		</div>
+
+		<div class=" w-full">
+			<Suggestions {suggestionPrompts} {submitPrompt} />
+		</div>
 	</div>
 {/if}