VKT(Frontend): Contact request flow UI improvements [deploy]

Opetushallitus · Nov 19, 2024 · 311ed6e · 311ed6e
1 parent cf3658b
commit 311ed6e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/frontend/packages/vkt/src/components/publicEnrollmentCommon/selectExam/Message.tsx b/frontend/packages/vkt/src/components/publicEnrollmentCommon/selectExam/Message.tsx
@@ -99,10 +99,10 @@ export const Message = ({
       <div className="margin-top-sm rows gapped">
         <H2>{t('title')}</H2>
       </div>
-      <div className="public-enrollment__grid__previous-enrollment rows gapped">
-        <div className="margin-top-sm">
+      <div className="public-enrollment__grid__previous-enrollment--good-and-satisfactory-level rows gapped">
+        <div className="margin-top-sm grow full-max-width">
           <LabeledTextField
-            className="public-enrollment__grid__previous-enrollment__textField"
+            className="public-enrollment__grid__previous-enrollment--good-and-satisfactory-level__textField"
             id="public-enrollment__previous-enrollment__textField"
             label={t('textField.label')}
             placeholder={t('textField.placeholder')}
@@ -112,6 +112,8 @@ export const Message = ({
             error={showCustomTextFieldError('message')}
             helperText={errors['message']}
             disabled={editingDisabled}
+            fullWidth
+            multiline
           />
         </div>
       </div>

diff --git a/frontend/packages/vkt/src/styles/components/publicEnrollment/_public-enrollment.scss b/frontend/packages/vkt/src/styles/components/publicEnrollment/_public-enrollment.scss
@@ -51,6 +51,18 @@
       }
     }
 
+    &__previous-enrollment--good-and-satisfactory-level {
+      width: 70%;
+
+      @include phone {
+        width: 100%;
+      }
+
+      &__textField {
+        margin-bottom: 2rem;
+      }
+    }
+
     &__partial-exam-selection {
       float: left;
       margin-left: 3rem;