fixes (#733)

src/lib/components/chat/AssistantIntroduction.svelte

@@ -23,7 +23,7 @@
 						assistant.avatar
 					}`}
 					alt="avatar"
-					class="size-16 rounded-full object-cover md:size-32"
+					class="size-16 flex-none rounded-full object-cover md:size-32"
 				/>
 			{:else}
 				<div
@@ -40,7 +40,7 @@
 					Assistant
 				</p>
 				<p class="text-xl font-bold sm:text-2xl">{assistant.name}</p>
-				<p class="text-sm text-gray-500 dark:text-gray-400">
+				<p class="text-balance text-sm text-gray-500 dark:text-gray-400">
 					{assistant.description}
 				</p>
 
@@ -57,7 +57,7 @@
 				{/if}
 			</div>
 		</div>
-		<div class="absolute right-2 top-3 sm:top-2">
+		<div class="absolute right-3 top-3 md:right-4 md:top-4">
 			<a
 				href="{base}/settings/assistants/{assistant._id.toString()}"
 				class="flex size-7 items-center justify-center rounded-full border bg-gray-200 p-1 text-xs hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600"

src/routes/assistant/[assistantId]/+page.svelte

@@ -45,17 +45,17 @@
 		use:clickOutside={() => {
 			goto(previousPage);
 		}}
-		class="z-10 flex flex-col content-center items-center gap-x-10 gap-y-2 overflow-hidden rounded-2xl bg-white p-4 text-center shadow-2xl outline-none max-sm:px-6 md:w-96 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
+		class="z-10 flex max-w-[90dvw] flex-col content-center items-center gap-x-10 gap-y-2 overflow-hidden rounded-2xl bg-white p-4 text-center shadow-2xl outline-none max-sm:px-6 md:w-96 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
 	>
 		{#if data.assistant.avatar}
 			<img
-				class="h-24 w-24 rounded-full object-cover"
+				class="size-16 flex-none rounded-full object-cover sm:size-24"
 				src="{base}/settings/assistants/{data.assistant._id}/avatar?hash={data.assistant.avatar}"
 				alt="avatar"
 			/>
 		{:else}
 			<div
-				class="flex h-24 w-24 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
+				class="flex size-24 flex-none items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
 			>
 				{data.assistant.name[0]}
 			</div>
@@ -63,7 +63,7 @@
 		<h1 class="text-2xl font-bold">
 			{data.assistant.name}
 		</h1>
-		<h3 class="text-sm text-gray-700">
+		<h3 class="text-balance text-sm text-gray-700">
 			{data.assistant.description}
 		</h3>
 		{#if data.assistant.createdByName}

src/routes/settings/assistants/[assistantId]/+page.svelte

@@ -33,7 +33,7 @@
 			<img
 				src={`${base}/settings/assistants/${assistant?._id}/avatar?hash=${assistant?.avatar}`}
 				alt="Avatar"
-				class="h-24 w-24 rounded-full object-cover"
+				class="size-16 flex-none rounded-full object-cover sm:size-24"
 			/>
 		{:else}
 			<div
@@ -115,7 +115,9 @@
 
 	<h2 class="mt-4 text-lg font-semibold">System Instructions</h2>
 
-	<textarea disabled class="h-[8lh] w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+	<textarea
+		disabled
+		class="min-h-[8lh] w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 2xl:min-h-[12lh]"
 		>{assistant?.preprompt}</textarea
 	>