From 9536957f72a4bb4cd659cbb6ae3e194c54fc2be2 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Mon, 26 Aug 2024 09:16:03 +0000
Subject: [PATCH] Adds padding to fit the errors

---
 .../device-qualification-from.component.html              | 2 ++
 .../device-qualification-from.component.scss              | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html
index 90c8c3543..cc5cfa233 100644
--- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html
+++ b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html
@@ -51,6 +51,7 @@ <h2 class="device-qualification-form-header-title">{{ data.title }}</h2>
           <mat-hint>Please enter device manufacturer name</mat-hint>
           <mat-error
             *ngIf="manufacturer.hasError('invalid_format')"
+            class="error-multiline"
             role="alert"
             aria-live="assertive">
             <span
@@ -72,6 +73,7 @@ <h2 class="device-qualification-form-header-title">{{ data.title }}</h2>
           <mat-hint>Please enter device name</mat-hint>
           <mat-error
             *ngIf="model.hasError('invalid_format')"
+            class="error-multiline"
             role="alert"
             aria-live="assertive">
             <span
diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss
index 2ec46e50c..bd18c05cc 100644
--- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss
+++ b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss
@@ -167,7 +167,7 @@ $form-height: 993px;
   gap: 10px;
   height: 100%;
   overflow: hidden;
-  &:last-of-type {
+  &:has(.device-qualification-form-summary-container) {
     grid-template-rows: min-content min-content 1fr min-content;
   }
 }
@@ -283,6 +283,11 @@ $form-height: 993px;
   background: $white;
 }
 
+.manufacturer-field:has(.error-multiline),
+.model-field:has(.error-multiline) {
+  padding-bottom: 14px;
+}
+
 @container qualification-form (height < 870px) {
   .device-qualification-form-page {
     overflow: scroll;
@@ -291,6 +296,7 @@ $form-height: 993px;
     }
   }
 }
+
 @container qualification-form (height < 580px) {
   .device-qualification-form-page {
     overflow: scroll;