limit to 255 for short answers

frontend/src/components/form/DoubleRangeSlider.svelte

@@ -89,6 +89,8 @@
     let rightOffset = 0;
 
     $: {
+        console.log(end)
+
         if (prevWidth !== width) {
             leftOffset = (width - (sliderDiameter / 2)) * ((start - min) / (max - min));
             rightOffset = (width - (sliderDiameter / 2)) * ((end - min) / (max - min));

frontend/src/components/manage/FormInputRow.svelte

@@ -30,14 +30,18 @@
            placeholder="Placeholder text for the field, just like this text" />
     <div class="col-2 properties-group">
       <div class="row">
-        <Dropdown col2={true} label="Style" bind:value={data.style}>
+        <Dropdown col2={true} label="Style" bind:value={data.style} on:change={updateStyle}>
           <option value=1 selected>Short</option>
           <option value=2>Multi-line</option>
         </Dropdown>
       </div>
       <div class="row" style="gap: 10px">
         <Checkbox label="Required" bind:value={data.required}/>
-        <DoubleRangeSlider label="Answer Length Range" bind:start={data.min_length} bind:end={data.max_length} min={0} max={1024} />
+        {#if data.style == 1}
+          <DoubleRangeSlider label="Answer Length Range" bind:start={data.min_length} bind:end={data.max_length} min={0} max={255} />
+        {:else}
+          <DoubleRangeSlider label="Answer Length Range" bind:start={data.min_length} bind:end={data.max_length} min={0} max={1024} />
+        {/if}
       </div>
     </div>
   </div>
@@ -117,6 +121,14 @@
   function forwardMove(direction) {
     dispatch('move', {direction: direction});
   }
+
+  function updateStyle(e) {
+      if (e.target.value == 1) { // Short
+          if (data.max_length > 255) {
+              data.max_length = 255
+          }
+      }
+  }
 </script>
 
 <style>