diff --git a/src/lib/components/ui_transverse_components/piece_of_cake/VerticalLine.svelte b/src/lib/components/ui_transverse_components/piece_of_cake/VerticalLine.svelte index 71744754b1d77570e419f40690689f3ff0c6cc09..ca6adc15baa11e7e7767cfac7b54b540cc4188f8 100644 --- a/src/lib/components/ui_transverse_components/piece_of_cake/VerticalLine.svelte +++ b/src/lib/components/ui_transverse_components/piece_of_cake/VerticalLine.svelte @@ -49,14 +49,21 @@ (100 / (max - min)) * (Number(firstPersonVariableOfInterestValue) - min), ), ) + + let outOfBounds = $derived( + Number(firstPersonVariableOfInterestValue) > max || + Number(firstPersonVariableOfInterestValue) < min, + ) </script> -<div - class="pointer-events-none absolute inset-y-0 inline border-l-2 border-neutral-600" - style:left="{linePositionX}%" -> - <div class="relative" style:top="-50px" style:left="-20px"> - <PictoBigPersonneACharge /> +{#if !outOfBounds} + <div + class="pointer-events-none absolute inset-y-0 inline border-l-2 border-neutral-600" + style:left="{linePositionX}%" + > + <div class="relative" style:top="-50px" style:left="-20px"> + <PictoBigPersonneACharge /> + </div> + <div class="relative" style:top="-80px" style:left="20px">Cas type</div> </div> - <div class="relative" style:top="-80px" style:left="20px">Cas type</div> -</div> +{/if}