fix: prevent overflowing for long description and default in schema

frontend/src/lib/components/PropertyRow.svelte

@@ -5,6 +5,7 @@
 	import SchemaEditorProperty from './SchemaEditorProperty.svelte'
 	import { Button } from './common'
 	import { Pen, Trash } from 'lucide-svelte'
+	import { truncate } from '$lib/utils'
 
 	export let displayInfo: PropertyDisplayInfo
 	export let isAnimated: boolean
@@ -44,8 +45,15 @@
 	<SchemaEditorProperty property={displayInfo.property} />
 </td>
 {#if !lightMode}
-	<td>{displayInfo.property.default ? JSON.stringify(displayInfo.property.default) : ''}</td>
-	<td>{displayInfo.property.description ?? ''}</td>
+	<td class="truncate max-w-xs !text-2xs"
+		>{truncate(
+			displayInfo.property.default ? JSON.stringify(displayInfo.property.default) : '',
+			100
+		)}</td
+	>
+	<td class="truncate max-w-xs !text-2xs"
+		>{truncate(displayInfo.property.description ?? '', 100)}</td
+	>
 {/if}
 <td />
 <td class="justify-end flex">

frontend/src/lib/components/SchemaEditor.svelte

@@ -312,9 +312,9 @@
 	<!--json schema or table view-->
 	<div class="h-full">
 		{#if !viewJsonSchema}
-			<div class="h-full">
+			<div class="h-full overflow-auto">
 				{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-					<TableCustom>
+					<TableCustom wFull>
 						<tr slot="header-row">
 							<th>Name</th>
 							<th>Type</th>
@@ -327,7 +327,7 @@
 						<tbody slot="body">
 							{#key schema.required}
 								{#each schemaPropertiesToDisplay(schema) as displayInfo (displayInfoKey(displayInfo))}
-									<tr animate:flip={{ duration: moveAnimationDuration }}>
+									<tr class="w-full" animate:flip={{ duration: moveAnimationDuration }}>
 										<PropertyRow
 											{displayInfo}
 											{isAnimated}