refac

src/lib/components/chat/MessageInput/Commands/Models.svelte

@@ -60,7 +60,7 @@
 	};
 </script>
 
-<div class="px-2 text-xs text-gray-500 py-1">
+<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
 	{$i18n.t('Models')}
 </div>
 
@@ -68,8 +68,9 @@
 	{#each filteredItems as model, modelIdx}
 		<Tooltip content={model.id} placement="top-start">
 			<button
-				class="px-2.5 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
-					? 'bg-gray-50 dark:bg-gray-800 selected-command-option-button'
+				class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {modelIdx ===
+				selectedIdx
+					? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
 					: ''}"
 				type="button"
 				on:click={() => {
@@ -81,16 +82,16 @@
 				on:focus={() => {}}
 				data-selected={modelIdx === selectedIdx}
 			>
-				<div class="flex text-black dark:text-gray-100 line-clamp-1">
+				<div class="flex min-w-0 items-center text-black dark:text-gray-100">
 					<img
 						src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
 						alt={model?.name ?? model.id}
-						class="rounded-full size-5 items-center mr-2"
+						class="mr-2 size-4.5 rounded-full object-cover"
 						on:error={(e) => {
 							e.currentTarget.src = '/favicon.png';
 						}}
 					/>
-					<div class="truncate">
+					<div class="min-w-0 truncate">
 						{model.name}
 					</div>
 				</div>