refac: selector mobile styling

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -251,13 +251,25 @@
 							show = false;
 						}}
 					>
+						<div class="flex flex-col">
+							{#if $mobile && (item?.model?.info?.meta?.tags ?? []).length > 0}
+								<div class="flex gap-0.5 self-start h-full mb-0.5 -translate-x-1">
+									{#each item.model?.info?.meta.tags as tag}
+										<div
+											class=" text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
+										>
+											{tag.name}
+										</div>
+									{/each}
+								</div>
+							{/if}
 							<div class="flex items-center gap-2">
 								<div class="flex items-center">
 									<div class="line-clamp-1">
 										{item.label}
 									</div>
 									{#if item.model.owned_by === 'ollama' && (item.model.ollama?.details?.parameter_size ?? '') !== ''}
-									<div class="flex ml-1 items-center">
+										<div class="flex ml-1 items-center translate-y-[0.5px]">
 											<Tooltip
 												content={`${
 													item.model.ollama?.details?.quantization_level
@@ -270,7 +282,8 @@
 												}`}
 												className="self-end"
 											>
-											<span class=" text-xs font-medium text-gray-600 dark:text-gray-400"
+												<span
+													class=" text-xs font-medium text-gray-600 dark:text-gray-400 line-clamp-1"
 													>{item.model.ollama?.details?.parameter_size ?? ''}</span
 												>
 											</Tooltip>
@@ -278,7 +291,7 @@
 									{/if}
 								</div>
 
-							{#if (item?.model?.info?.meta?.tags ?? []).length > 0}
+								{#if !$mobile && (item?.model?.info?.meta?.tags ?? []).length > 0}
 									<div class="flex gap-0.5 self-center items-center h-full translate-y-[0.5px]">
 										{#each item.model?.info?.meta.tags as tag}
 											<div
@@ -341,6 +354,7 @@
 									</Tooltip>
 								{/if}
 							</div>
+						</div>
 
 						{#if value === item.value}
 							<div class="ml-auto pl-2">