From a30f2e96c74df409201f59231b1c02b48e04b36b Mon Sep 17 00:00:00 2001
From: Anastasia Diseth <annadiseth@gmail.com>
Date: Mon, 27 May 2024 14:47:14 +0300
Subject: [PATCH] fix text field in survey answers to more flexible

---
 src/components/SharedMisc/AdvancedDropdown.tsx |  1 +
 src/components/Survey/SurveyExerciseItem.tsx   | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/SharedMisc/AdvancedDropdown.tsx b/src/components/SharedMisc/AdvancedDropdown.tsx
index 867e75e..d49f74a 100644
--- a/src/components/SharedMisc/AdvancedDropdown.tsx
+++ b/src/components/SharedMisc/AdvancedDropdown.tsx
@@ -45,6 +45,7 @@ const AdvancedDropdown: React.FC<React.PropsWithChildren<Props>> = ({
       maxMenuHeight={400}
       className={css`
         aria-label: breed-selection;
+        width: 99%;
       `}
     />
     //</div>
diff --git a/src/components/Survey/SurveyExerciseItem.tsx b/src/components/Survey/SurveyExerciseItem.tsx
index 3b81530..f0b2840 100644
--- a/src/components/Survey/SurveyExerciseItem.tsx
+++ b/src/components/Survey/SurveyExerciseItem.tsx
@@ -1,6 +1,8 @@
 import { css } from "@emotion/css"
 import styled from "@emotion/styled"
 
+import TextAreaField from "../../shared-module/components/InputFields/TextAreaField"
+import TextField from "../../shared-module/components/InputFields/TextField"
 import { AnswerType, SurveyItem } from "../../util/spec-types/privateSpec"
 import MarkdownText from "../MarkdownText"
 import AdvancedDropdown from "../SharedMisc/AdvancedDropdown"
@@ -50,7 +52,7 @@ const SurveyExerciseitem: React.FC<React.PropsWithChildren<Props>> = ({
     case AnswerType.Number: {
       return (
         <div>
-          <input
+          <TextField
             aria-label={`number-input-for-${item.question.questionLabel}`}
             value={answer ?? ""}
             type="number"
@@ -62,6 +64,7 @@ const SurveyExerciseitem: React.FC<React.PropsWithChildren<Props>> = ({
             className={css`
               border: 1px solid #e0e0e0;
               border-radius: 2px;
+              max-width: 10em;
             `}
           />
         </div>
@@ -70,18 +73,20 @@ const SurveyExerciseitem: React.FC<React.PropsWithChildren<Props>> = ({
     case AnswerType.Text: {
       return (
         <div>
-          <input
+          <TextAreaField
             aria-label={`text-input-for-${item.question.questionLabel}`}
             value={answer ?? ""}
-            type="text"
+            autoResize
             onChange={(e) => {
               updateAnswer(item.id, e.target.value)
             }}
             required
             disabled={disabled}
             className={css`
-              border: 1px solid #e0e0e0;
-              border-radius: 2px;
+              textarea {
+                width: 99%;
+                max-height: 200px;
+              }
             `}
           />
         </div>