Merge pull request #14085 from mtsymbarov-del/fix/dialogs

Fixed dialogs adjusting to the screen resolution.

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html

@@ -38,7 +38,7 @@
               <mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
                 <mat-expansion-panel-header>
                   <div class="flex flex-1 flex-row items-center justify-start">
-                    <mat-panel-title>
+                    <mat-panel-title  class="basis-auto">
                       <div class="flex flex-1 flex-row items-center justify-start">
                         <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
                       </div>
@@ -60,6 +60,7 @@
                       <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
                         <tb-entity-type-select
                           showLabel
+                          appearance="outline"
                           formControlName="entityType"
                           required
                           [filterAllowedEntityTypes]="false"
@@ -67,13 +68,14 @@
                         </tb-entity-type-select>
                         <div formGroupName="config">
                           <tb-branch-autocomplete
+                            appearance="outline"
                             emptyPlaceholder="{{ 'version-control.default' | translate }}"
                             [selectDefaultBranch]="false"
                             formControlName="branch">
                           </tb-branch-autocomplete>
                         </div>
                       </div>
-                      <div class="flex flex-1 flex-row items-center justify-start gap-4 xs:flex-col xs:items-start xs:justify-start xs:gap-0"
+                      <div class="flex flex-1 flex-col gt-xs:flex-row items-start gt-xs:items-center justify-start gap-1 gt-xs:gap-4"
                            formGroupName="config">
                         <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                           {{ 'version-control.export-credentials' | translate }}

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss

@@ -52,7 +52,6 @@
       padding: 0 8px 8px;
       tb-branch-autocomplete {
         min-width: 200px;
-        max-width: 200px;
         display: block;
       }
     }

ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html

@@ -39,7 +39,7 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <mat-form-field class="mat-block" style="margin-bottom: 24px;">
+    <mat-form-field class="mat-block" style="margin-bottom: 24px;" subscriptSizing="dynamic">
       <mat-label translate>version-control.default-sync-strategy</mat-label>
       <mat-select required formControlName="syncStrategy">
         <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html

@@ -171,11 +171,11 @@
             </div>
           </div>
           <mat-divider class="divider"></mat-divider>
-          <mat-chip-listbox>
-            <mat-chip *ngFor="let recipientTitle of preview.recipientsPreview">
+          <mat-chip-set>
+            <mat-chip-row class="tb-chip-row-ellipsis" *ngFor="let recipientTitle of preview.recipientsPreview">
               <span>{{ recipientTitle }}</span>
-            </mat-chip>
-          </mat-chip-listbox>
+            </mat-chip-row>
+          </mat-chip-set>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.WEB?.enabled">
           <div class="flex flex-row items-center justify-start gap-2">

ui-ngx/src/app/shared/components/file-input.component.html

@@ -39,11 +39,13 @@
            [flow]="flow.flowJs">
         <div class="upload-label">
           <mat-icon class="tb-mat-32 drop-label-icon">cloud_upload</mat-icon>
-          <span class="drop-label-text">{{ dropLabel }}</span>
-          <button type="button" mat-button color="primary" class="browse-file" [class]="uploadButtonClass">
-            <label
-              for="{{inputId}}">{{ uploadButtonText ? uploadButtonText : ((multipleFile ? 'file-input.browse-files' : 'file-input.browse-file') | translate) }}</label>
-          </button>
+          <div>
+            <span class="drop-label-text">{{ dropLabel }}</span>
+            <button type="button" mat-button color="primary" class="browse-file" [class]="uploadButtonClass">
+              <label
+                for="{{inputId}}">{{ uploadButtonText ? uploadButtonText : ((multipleFile ? 'file-input.browse-files' : 'file-input.browse-file') | translate) }}</label>
+            </button>
+          </div>
           <input class="file-input" flowButton #flowInput type="file" [flow]="flow.flowJs"
                  [flowAttributes]="{accept: accept}" id="{{inputId}}">
         </div>

ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="branchFormGroup" class="mat-block" [floatLabel]="(selectionMode || emptyPlaceholder) ? 'always' : 'auto'" subscriptSizing="{{ subscriptSizing }}">
+<mat-form-field [formGroup]="branchFormGroup" class="mat-block" [floatLabel]="(selectionMode || emptyPlaceholder) ? 'always' : 'auto'" subscriptSizing="{{ subscriptSizing }}" [appearance]="appearance">
   <mat-label>{{ 'version-control.branch' | translate }}</mat-label>
   <input matInput type="text" placeholder="{{emptyPlaceholder || ((loading ? 'common.loading' : 'version-control.select-branch') | translate)}}"
          #branchInput

ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts

@@ -35,7 +35,7 @@ import { BranchInfo } from '@shared/models/vc.models';
 import { EntitiesVersionControlService } from '@core/http/entities-version-control.service';
 import { isNotEmptyStr } from '@core/utils';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-branch-autocomplete',
@@ -93,6 +93,9 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
   @Input()
   emptyPlaceholder: string;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   @ViewChild('branchAutocomplete') matAutocomplete: MatAutocomplete;
   @ViewChild('branchInput', { read: MatAutocompleteTrigger, static: true }) autoCompleteTrigger: MatAutocompleteTrigger;
   @ViewChild('branchInput', {static: true}) branchInput: ElementRef<HTMLInputElement>;