From 7daaf06ab358981bd4a188e1854fbca19a1cbb03 Mon Sep 17 00:00:00 2001
From: Henry Taeschner <henry.taeschner@capgemini.com>
Date: Fri, 27 Sep 2024 12:11:24 +0200
Subject: [PATCH] fix: layout color box in import

---
 .../theme-color-box/theme-color-box.component.scss   |  2 +-
 .../theme/theme-import/theme-import.component.html   | 12 ++++++------
 .../theme/theme-import/theme-import.component.scss   |  1 +
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/theme-color-box/theme-color-box.component.scss b/src/app/shared/theme-color-box/theme-color-box.component.scss
index 2841710..1b8d037 100644
--- a/src/app/shared/theme-color-box/theme-color-box.component.scss
+++ b/src/app/shared/theme-color-box/theme-color-box.component.scss
@@ -14,6 +14,6 @@
   }
   // height of a normal text input control
   .h-inputtext {
-    height: 2.786rem;
+    height: 2.786rem !important;
   }
 }
diff --git a/src/app/theme/theme-import/theme-import.component.html b/src/app/theme/theme-import/theme-import.component.html
index 21b9e85..b7acec1 100644
--- a/src/app/theme/theme-import/theme-import.component.html
+++ b/src/app/theme/theme-import/theme-import.component.html
@@ -25,13 +25,13 @@
     [cancelLabel]="'ACTIONS.CANCEL' | translate"
     [chooseLabel]="'ACTIONS.CHOOSE' | translate"
   ></p-fileUpload>
-  <div *ngIf="themeSnapshot" class="flex flex-wrap justify-content-start align-items-center gap-2 mt-4">
-    <span class="p-float-label" controlErrorAnchor>
+  <div *ngIf="themeSnapshot" class="flex flex-wrap justify-content-start align-items-center gap-3 mt-4">
+    <span class="p-float-label w-full md:w-15rem" controlErrorAnchor>
       <input
         pInputText
         type="text"
         id="th_import_theme_name"
-        class="w-full pt-3 pb-2"
+        class="w-full pt-3 pb-2 text-responsive"
         [(ngModel)]="themeName"
         (ngModelChange)="checkThemeExistence()"
         (keyup)="checkThemeExistence()"
@@ -41,12 +41,12 @@
       />
       <label class="ocx-required-label" for="th_import_theme_name">{{ 'THEME.THEME_NAME' | translate }}</label>
     </span>
-    <span class="p-float-label" controlErrorAnchor>
+    <span class="p-float-label w-full md:w-15rem" controlErrorAnchor>
       <input
         pInputText
         type="text"
         id="th_import_theme_display_name"
-        class="w-full pt-3 pb-2"
+        class="w-full pt-3 pb-2 text-responsive"
         [(ngModel)]="displayName"
         (ngModelChange)="checkThemeExistence()"
         (keyup)="checkThemeExistence()"
@@ -58,7 +58,7 @@
         {{ 'THEME.DISPLAY_NAME' | translate }}
       </label>
     </span>
-    <app-theme-color-box *ngIf="properties" [properties]="properties" />
+    <app-theme-color-box *ngIf="properties" [properties]="properties" styleClass="h-inputtext w-15rem" />
     <div *ngIf="!properties">{{ 'THEME.NO_PROPERTIES' | translate }}</div>
   </div>
   <p-message
diff --git a/src/app/theme/theme-import/theme-import.component.scss b/src/app/theme/theme-import/theme-import.component.scss
index c7b7d62..d876e27 100644
--- a/src/app/theme/theme-import/theme-import.component.scss
+++ b/src/app/theme/theme-import/theme-import.component.scss
@@ -2,3 +2,4 @@
 
 @include correct-file-upload;
 @include dialog-footer-buttons;
+@include displaying-text-responsive;