refac: styling

src/lib/components/chat/MessageInput.svelte

@@ -233,7 +233,7 @@
 
 <div class="w-full font-primary">
 	<div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
-		<div class="flex flex-col max-w-6xl w-full">
+		<div class="flex flex-col px-2.5 max-w-6xl w-full">
 			<div class="relative">
 				{#if autoScroll === false && history?.currentId}
 					<div
@@ -315,7 +315,7 @@
 	</div>
 
 	<div class="{transparentBackground ? 'bg-transparent' : 'bg-white dark:bg-gray-900'} ">
-		<div class="max-w-6xl px-2.5 md:px-6 mx-auto inset-x-0 pb-safe-bottom">
+		<div class="max-w-6xl px-2.5 mx-auto inset-x-0 pb-safe-bottom">
 			<div class="">
 				<input
 					bind:this={filesInputElement}

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

@@ -89,7 +89,7 @@
 </script>
 
 {#key mounted}
-	<div class="m-auto w-full max-w-6xl px-4 xl:px-20 translate-y-2 text-center">
+	<div class="m-auto w-full max-w-6xl px-2 xl:px-20 translate-y-2 text-center">
 		{#if $temporaryChatEnabled}
 			<Tooltip
 				content="This chat won't appear in history and your messages will not be saved."
@@ -107,13 +107,13 @@
 		>
 			<div class="w-full flex flex-col justify-center items-center">
 				<Tooltip
-					className="flex justify-center gap-3.5 w-fit"
+					className="flex flex-col md:flex-row justify-center gap-2 md:gap-3.5 w-fit"
 					content={marked.parse(
 						sanitizeResponseContent(models[selectedModelIdx]?.info?.meta?.description ?? '')
 					)}
 					placement="top"
 				>
-					<div class="flex justify-center">
+					<div class="flex flex-shrink-0 justify-center">
 						<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 200 }}>
 							{#each models as model, modelIdx}
 								<button
@@ -136,7 +136,7 @@
 						</div>
 					</div>
 
-					<div class=" capitalize line-clamp-1 text-4xl" in:fade={{ duration: 200 }}>
+					<div class=" capitalize line-clamp-1 text-3xl md:text-4xl" in:fade={{ duration: 200 }}>
 						{#if models[selectedModelIdx]?.info}
 							{models[selectedModelIdx]?.info?.name}
 						{:else}