Fix import color box (#263)

* fix: layout color box in import

* fix: dep. versions

package.json

@@ -89,13 +89,13 @@
     "@openapitools/openapi-generator-cli": "^2.13.4",
     "@schematics/angular": "^18.2.5",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "22.6.1",
+    "@types/node": "22.7.3",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "css-loader": "^7.1.2",
     "eslint": "~8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.1.6",
     "jasmine-core": "~5.2.0",

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;
   }
 }

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

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;