fix(frontend): add temp hidden span to compute the text max length (#1573)

* fix(frontend): add temp hidden span to compute the text max length

* fix(frontend): add temp hidden span to compute the text max length

* fix(frontend): add missing render condition

frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte

@@ -20,9 +20,10 @@
 	let min = 0
 	let max = 42
 	let step = 1
+
 	let slider: HTMLElement
 
-	let outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, id, {
 		result: (0 as number) || null
 	})
 
@@ -49,6 +50,30 @@
 			handle.style.cssText = css?.handle?.style ?? ''
 		}
 	}
+
+	let width = 0
+
+	const spanClass =
+		'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5'
+	function computeWidth() {
+		let maxValue = max + step
+
+		if (typeof document !== 'undefined') {
+			const span = document.createElement('span')
+			span.style.visibility = 'hidden'
+			span.style.position = 'absolute'
+			span.style.whiteSpace = 'nowrap'
+			span.className = spanClass
+			span.textContent = maxValue.toString()
+			document.body.appendChild(span)
+			width = span?.offsetWidth
+			document.body.removeChild(span)
+		}
+	}
+
+	$: if (max && step && render) {
+		computeWidth()
+	}
 </script>
 
 <InputValue {id} input={configuration.step} bind:value={step} />
@@ -80,11 +105,8 @@
 		</span>
 		<span class="mx-2">
 			<span
-				class={twMerge(
-					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
-					css?.value?.class ?? ''
-				)}
-				style={css?.value?.style ?? ''}
+				class={twMerge(spanClass, css?.value?.class ?? '')}
+				style={`${css?.value?.style ?? ''} ${width ? `width: ${width}px;` : ''}`}
 			>
 				{values[0]}
 			</span>