Code snippet, better UX in questionnaire

src/components/Form/Checkbox.svelte

@@ -6,7 +6,7 @@
   export let isEditable = false;
 </script>
 
-<label class="inline-flex items-center">
+<label class="inline-flex items-center w-full">
   <input
     type="checkbox"
     class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"

src/components/Form/RadioItem.svelte

@@ -6,7 +6,7 @@
   export let isEditable = false;
 </script>
 
-<label class="inline-flex items-center">
+<label class="inline-flex items-center w-full">
   <input
     class="form-radio"
     type="radio"

src/components/Form/TextArea.svelte

@@ -2,18 +2,50 @@
   export let label;
   export let placeholder = "Write your answer...";
   export let value;
+  export let rows = "3";
+  export let maxRows;
+
+  $: minHeight = `${1 + parseInt(rows, 10) * 1.2}em`;
+  $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 </script>
 
-<label class="block">
+<label class="block w-full relative">
   {#if label}
     <span class="text-gray-700">{label}</span>
   {/if}
+
+  <pre
+    aria-hidden="true"
+    style="min-height: {minHeight}; max-height: {maxHeight}">
+    {value + '\n'}
+  </pre>
+
   <textarea
-    class="form-textarea mt-1 block w-full h-24"
-    rows="3"
+    {rows}
     {placeholder}
     bind:value
+    class="form-textarea block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
   />
 
   <slot name="iconbutton" />
 </label>
+
+<style>
+  pre,
+  textarea {
+    font-family: inherit;
+    padding: 0.5em;
+    box-sizing: border-box;
+    border: 1px solid #eee;
+    line-height: 1.2;
+    overflow: hidden;
+  }
+
+  textarea {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    resize: none;
+  }
+</style>

src/components/Form/TextField.svelte

@@ -3,9 +3,10 @@
   export let placeholder;
   export let value;
   export let onKeyDown;
+  export let className = "";
 </script>
 
-<label class="block mb-3">
+<label class="block {className}">
   {#if label}<h4 class="m-0">{label}</h4>{/if}
   <input
     class="form-input p-2 mt-1 block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"