Use a textarea in the feedback modal

src/input/Input.jsx

@@ -38,14 +38,25 @@ export const InputField = forwardRef(
         )}
       >
         {prefix && <span>{prefix}</span>}
-        <input
+        {type === "textarea" ? (
-          id={id}
+          <textarea
-          {...rest}
+            id={id}
-          ref={ref}
+            {...rest}
-          type={type}
+            ref={ref}
-          checked={checked}
+            type={type}
-          disabled={disabled}
+            disabled={disabled}
-        />
+          />
+        ) : (
+          <input
+            id={id}
+            {...rest}
+            ref={ref}
+            type={type}
+            checked={checked}
+            disabled={disabled}
+          />
+        )}
+
         <label htmlFor={id}>
           {type === "checkbox" && (
             <div className={styles.checkbox}>

src/input/Input.module.css

@@ -29,7 +29,8 @@
   border: 1px solid var(--inputBorderColor);
 }
 
-.inputField input {
+.inputField input,
+.inputField textarea {
   font-weight: 400;
   font-size: 15px;
   border: none;
@@ -42,6 +43,7 @@
 }
 
 .inputField.disabled input,
+.inputField.disabled textarea,
 .inputField.disabled span {
   color: var(--textColor2);
 }
@@ -54,12 +56,14 @@
   padding-right: 0;
 }
 
-.inputField input::placeholder {
+.inputField input::placeholder,
+.inputField textarea::placeholder {
   transition: color 0.25s ease-in 0s;
   color: transparent;
 }
 
-.inputField input:placeholder-shown:focus::placeholder {
+.inputField input:placeholder-shown:focus::placeholder,
+.inputField textarea:placeholder-shown:focus::placeholder {
   transition: color 0.25s ease-in 0.1s;
   color: var(--textColor2);
 }
@@ -86,13 +90,17 @@
   border-color: var(--inputBorderColorFocused);
 }
 
-.inputField input:focus {
+.inputField input:focus,
+.inputField textarea:focus {
   outline: 0;
 }
 
 .inputField input:focus + label,
 .inputField input:not(:placeholder-shown) + label,
-.inputField.prefix input + label {
+.inputField.prefix textarea + label,
+.inputField textarea:focus + label,
+.inputField textarea:not(:placeholder-shown) + label,
+.inputField.prefix textarea + label {
   background-color: var(--bgColor2);
   transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
     top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
@@ -102,7 +110,8 @@
   pointer-events: auto;
 }
 
-.inputField input:focus + label {
+.inputField input:focus + label,
+.inputField textarea:focus + label {
   color: var(--inputBorderColorFocused);
 }
 

src/room/FeedbackModal.jsx

@@ -48,7 +48,7 @@ export function FeedbackModal({ inCall, roomId, ...rest }) {
               id="description"
               name="description"
               label="Description (optional)"
-              type="text"
+              type="textarea"
             />
           </FieldRow>
           <FieldRow>