Ver Fonte

fix: prompt suggestions styling

Timothy J. Baek há 1 ano atrás
pai
commit
99faf90324

+ 4 - 2
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">
 <div class=" flex flex-wrap-reverse mb-3 md:p-1 text-left w-full">
 	{#each prompts as prompt, promptIdx}
 	{#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
 			<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"
 				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={() => {
 				on:click={() => {
@@ -22,7 +24,7 @@
 				<div class="flex flex-col text-left self-center">
 				<div class="flex flex-col text-left self-center">
 					{#if prompt.title && prompt.title[0] !== ''}
 					{#if prompt.title && prompt.title[0] !== ''}
 						<div class="text-sm font-medium dark:text-gray-300">{prompt.title[0]}</div>
 						<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}
 					{:else}
 						<div class=" self-center text-sm font-medium dark:text-gray-300 line-clamp-2">
 						<div class=" self-center text-sm font-medium dark:text-gray-300 line-clamp-2">
 							{prompt.content}
 							{prompt.content}