UI: Minor layout fixes.

ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html

@@ -16,13 +16,13 @@
 
 -->
 <div class="tb-led-indicator flex flex-col">
-  <div #ledTitleContainer class="title-container flex max-w-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
+  <div #ledTitleContainer class="title-container flex max-h-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #ledTitle class="led-title">{{title}}</span>
   </div>
   <div class="flex flex-full flex-col items-center justify-center"
        [class]="{
-          'max-w-80%': showTitle,
-          'max-w-100%': !showTitle
+          'max-h-80%': showTitle,
+          'max-h-100%': !showTitle
        }"
        [style.padding-top]="showTitle ? '5px': '10px'" #ledContainer id="led-container">
     <div #led class="led">

ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html

@@ -16,13 +16,13 @@
 
 -->
 <div class="tb-round-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
-  <div #switchTitleContainer class="title-container flex max-w-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
+  <div #switchTitleContainer class="title-container flex max-h-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #switchTitle class="switch-title">{{title}}</span>
   </div>
   <div #switchContainer class="flex flex-full flex-col items-center justify-center"
        [class]="{
-          'max-w-80%': showTitle,
-          'max-w-100%': !showTitle
+          'max-h-80%': showTitle,
+          'max-h-100%': !showTitle
        }"
        [style.padding-top]="showTitle ? '5px': '10px'" id="switch-container">
     <div #switch class="switch">

ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html

@@ -19,13 +19,13 @@
   <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #switchError class="switch-error">{{ error }}</span>
   </div>
-  <div #switchTitleContainer class="title-container flex max-w-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
+  <div #switchTitleContainer class="title-container flex max-h-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #switchTitle class="switch-title">{{title}}</span>
   </div>
   <div #switchContainer class="flex flex-full flex-col items-center justify-center"
        [class]="{
-          'max-w-70%': showTitle,
-          'max-w-100%': !showTitle
+          'max-h-70%': showTitle,
+          'max-h-100%': !showTitle
        }"
        id="switch-container">
     <div #switch class="switch">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html

@@ -17,7 +17,7 @@
 -->
 
 <div class="tb-form-row no-border no-padding column-xs" style="gap: 10px;" [formGroup]="valueSourceFormGroup">
-  <mat-form-field class="max-w-33% flex-full xs:flex-1" appearance="outline" subscriptSizing="dynamic">
+  <mat-form-field class="gt-xs:max-w-33% gt-xs:flex-full xs:flex-1" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="valueSource">
       <mat-option [value]="'predefinedValue'">
         {{ 'widgets.value-source.predefined-value' | translate }}

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html

@@ -22,7 +22,7 @@
   <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block max-w-50% flex-full">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.datakey-type</mat-label>
         <mat-select formControlName="dataKeyType">
           <mat-option [value]="'server'">
@@ -36,7 +36,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="mat-block max-w-50% flex-full">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.datakey-value-type</mat-label>
         <mat-select formControlName="dataKeyValueType">
           <mat-option [value]="'string'">
@@ -79,7 +79,7 @@
       {{ 'widgets.input-widgets.value-is-required' | translate }}
     </mat-checkbox>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block max-w-50% flex-full">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.ability-to-edit-attribute</mat-label>
         <mat-select formControlName="isEditable">
           <mat-option [value]="'editable'">
@@ -93,14 +93,14 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block max-w-50% flex-full">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.disable-on-datakey-name</mat-label>
         <input matInput formControlName="disabledOnDataKey">
       </mat-form-field>
     </section>
     <section *ngIf="!['booleanSwitch', 'booleanCheckbox'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
              class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block max-w-50% flex-full">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.field-appearance</mat-label>
         <mat-select formControlName="appearance">
           <mat-option [value]="'fill'">
@@ -111,7 +111,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="mat-block max-w-50% flex-full">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
         <mat-select formControlName="subscriptSizing">
           <mat-option [value]="'fixed'">

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html

@@ -62,10 +62,10 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.group-settings</legend>
     <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
-      <mat-slide-toggle formControlName="showGroupTitle" class="slide-block max-w-30% flex-full">
+      <mat-slide-toggle formControlName="showGroupTitle" class="slide-block flex-full xs:max-h-30% gt-xs:max-w-30%">
         {{ 'widgets.input-widgets.show-group-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field class="mat-block max-w-70% flex-full">
+      <mat-form-field class="mat-block flex-full xs:max-h-70% gt-xs:max-w-70%">
         <mat-label translate>widgets.input-widgets.group-title</mat-label>
         <input matInput formControlName="groupTitle">
       </mat-form-field>
@@ -74,7 +74,7 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.layout</legend>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block max-w-50% flex-full">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.fields-alignment</mat-label>
         <mat-select formControlName="fieldsAlignment">
           <mat-option [value]="'row'">
@@ -85,17 +85,17 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block max-w-50% flex-full">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.fields-in-row</mat-label>
         <input matInput type="number" min="1" step="1" formControlName="fieldsInRow">
       </mat-form-field>
     </section>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block max-w-50% flex-full">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.row-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="rowGap">
       </mat-form-field>
-      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block max-w-50% flex-full">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.column-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="columnGap">
       </mat-form-field>

ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html

@@ -32,7 +32,7 @@
     </ng-template>
     <tb-entity-list
       required
-      class="max-w-60% flex-full"
+      class="flex-full xs:max-h-60% gt-xs:max-w-60%"
       formControlName="targets"
       subscriptSizing="dynamic"
       entityType="{{ entityType.NOTIFICATION_TARGET }}"

ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html

@@ -65,7 +65,7 @@
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit" class="flex flex-col">
       <div class="flex flex-row xs:flex-col gt-xs:gap-2">
-        <mat-form-field class="mat-block max-w-45% flex-full">
+        <mat-form-field class="mat-block flex-full gt-xs:max-w-45%">
           <mat-label translate>ota-update.title</mat-label>
           <input matInput formControlName="title" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('title').hasError('required')">
@@ -131,7 +131,7 @@
         </section>
         <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-xs:gap-2"
              *ngIf="!(isAdd && this.entityForm.get('generateChecksum').value)">
-          <mat-form-field class="mat-block max-w-33% flex-full">
+          <mat-form-field class="mat-block flex-full gt-xs:max-w-33%">
             <mat-label translate>ota-update.checksum-algorithm</mat-label>
             <mat-select formControlName="checksumAlgorithm">
               <mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
@@ -147,7 +147,7 @@
         </div>
         <section *ngIf="!isAdd">
           <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
-            <mat-form-field class="mat-block max-w-33% flex-full">
+            <mat-form-field class="mat-block flex-full gt-xs:max-w-33%">
               <mat-label translate>ota-update.file-name</mat-label>
               <input matInput formControlName="fileName" type="text">
             </mat-form-field>

ui-ngx/tailwind.config.js

@@ -132,6 +132,7 @@ module.exports = {
         '90%': '90%',
         '92%': '92%',
         '95%': '95%',
+        '100%': '100%',
         '1/2': '50%',
         '1/3': '33.333333%',
         '2/3': '66.666667%',
@@ -152,6 +153,15 @@ module.exports = {
         '37.5': '9.375rem',
         '62.5': '15.625rem',
         '72.5': '18.125rem'
+      },
+      maxHeight: {
+        '20%': '20%',
+        '30%': '30%',
+        '50%': '50%',
+        '60%': '60%',
+        '70%': '70%',
+        '80%': '80%',
+        '100%': '100%'
       }
     },
   },