refac: styling

src/lib/components/chat/Placeholder.svelte

@@ -138,7 +138,7 @@
 					</div>
 				</div>
 
-				<div class=" text-3xl @sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}>
+				<div class=" text-3xl @sm:text-3xl line-clamp-1" in:fade={{ duration: 100 }}>
 					{#if models[selectedModelIdx]?.name}
 						{models[selectedModelIdx]?.name}
 					{:else}

src/lib/components/chat/Suggestions.svelte

@@ -81,39 +81,41 @@
 	{/if}
 </div>
 
-<div class="max-h-40 overflow-auto scrollbar-none {className} items-start">
+<div class="h-40 w-full">
 	{#if filteredPrompts.length > 0}
-		{#each filteredPrompts as prompt, idx (prompt.id || prompt.content)}
-			<button
-				class="waterfall flex flex-col flex-1 shrink-0 w-full justify-between
+		<div class="max-h-40 overflow-auto scrollbar-none items-start {className}">
+			{#each filteredPrompts as prompt, idx (prompt.id || prompt.content)}
+				<button
+					class="waterfall flex flex-col flex-1 shrink-0 w-full justify-between
 				       px-3 py-2 rounded-xl bg-transparent hover:bg-black/5
 				       dark:hover:bg-white/5 transition group"
-				style="animation-delay: {idx * 60}ms"
-				on:click={() => dispatch('select', prompt.content)}
-			>
-				<div class="flex flex-col text-left">
-					{#if prompt.title && prompt.title[0] !== ''}
-						<div
-							class="font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
-						>
-							{prompt.title[0]}
-						</div>
-						<div class="text-xs text-gray-600 dark:text-gray-400 font-normal line-clamp-1">
-							{prompt.title[1]}
-						</div>
-					{:else}
-						<div
-							class="font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
-						>
-							{prompt.content}
-						</div>
-						<div class="text-xs text-gray-600 dark:text-gray-400 font-normal line-clamp-1">
-							{$i18n.t('Prompt')}
-						</div>
-					{/if}
-				</div>
-			</button>
-		{/each}
+					style="animation-delay: {idx * 60}ms"
+					on:click={() => dispatch('select', prompt.content)}
+				>
+					<div class="flex flex-col text-left">
+						{#if prompt.title && prompt.title[0] !== ''}
+							<div
+								class="font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
+							>
+								{prompt.title[0]}
+							</div>
+							<div class="text-xs text-gray-600 dark:text-gray-400 font-normal line-clamp-1">
+								{prompt.title[1]}
+							</div>
+						{:else}
+							<div
+								class="font-medium dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
+							>
+								{prompt.content}
+							</div>
+							<div class="text-xs text-gray-600 dark:text-gray-400 font-normal line-clamp-1">
+								{$i18n.t('Prompt')}
+							</div>
+						{/if}
+					</div>
+				</button>
+			{/each}
+		</div>
 	{/if}
 </div>