refac

src/lib/components/workspace/Models/BuiltinTools.svelte

@@ -67,12 +67,15 @@
 </script>
 
 <div>
-	<div class="flex w-full justify-between mb-1">
-		<div class="self-center text-xs font-normal text-gray-500">{$i18n.t('Builtin Tools')}</div>
-	</div>
-	<div class="flex items-center mt-2 flex-wrap">
+	<div class="mb-1.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Builtin Tools')}</div>
+	<div class="grid grid-cols-1 gap-x-5 gap-y-1 sm:grid-cols-2 xl:grid-cols-3">
 		{#each allTools as tool}
-			<div class="flex items-center gap-2 mr-3">
+			<div class="flex min-h-6 items-center justify-between gap-2.5">
+				<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
+					<Tooltip content={marked.parse(toolLabels[tool].description)}>
+						<span class="truncate">{$i18n.t(toolLabels[tool].label)}</span>
+					</Tooltip>
+				</div>
 				<Checkbox
 					state={builtinTools[tool] !== false ? 'checked' : 'unchecked'}
 					on:change={(e) => {
@@ -84,12 +87,6 @@
 						builtinTools = builtinTools;
 					}}
 				/>
-
-				<div class="py-0.5 text-sm">
-					<Tooltip content={marked.parse(toolLabels[tool].description)}>
-						{$i18n.t(toolLabels[tool].label)}
-					</Tooltip>
-				</div>
 			</div>
 		{/each}
 	</div>