From 193d654329fc30a9460f0ad9c6f4ec9b75fa458e Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Fri, 3 Oct 2025 09:59:17 +0300
Subject: [PATCH] rewrite some fixes for dialogs

---
 .../vc/auto-commit-settings.component.html       |  2 +-
 .../vc/auto-commit-settings.component.scss       |  6 +++++-
 .../vc/complex-version-create.component.html     |  3 +--
 .../sent/sent-notification-dialog.component.scss | 16 ++++++++--------
 .../entity/entity-type-select.component.ts       |  2 +-
 .../vc/branch-autocomplete.component.html        |  2 +-
 .../vc/branch-autocomplete.component.ts          |  5 ++++-
 7 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
index 716722d795..d985ddb06b 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
@@ -56,7 +56,7 @@
                 <ng-template matExpansionPanelContent>
                   <div class="entity-type-config-content flex flex-col gap-2">
                     <mat-divider></mat-divider>
-                    <div class="flex flex-col gt-xs:flex-row gap-1 gt-xs:gap-4">
+                    <div class="flex flex-col gt-lg:flex-row gt-lg:gap-4">
                       <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
                         <tb-entity-type-select
                           showLabel
diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss
index a72bd2ca77..a5bb664709 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
   .mat-mdc-card.auto-commit-settings {
     margin: 8px;
@@ -52,7 +54,9 @@
       padding: 0 8px 8px;
       tb-branch-autocomplete {
         min-width: 200px;
-        max-width: 200px;
+        @media #{$mat-gt-xs} {
+          max-width: 200px;
+        }
         display: block;
       }
     }
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
index 2621979b89..c4ddc88301 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
+++ b/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">
@@ -49,7 +49,6 @@
       <mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint>
     </mat-form-field>
     <tb-entity-types-version-create
-      class="mt-5"
       formControlName="entityTypes">
     </tb-entity-types-version-create>
   </form>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index 24d07b59d5..ab502910e1 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@@ -234,12 +234,12 @@
   }
 }
 
-:host ::ng-deep .mdc-evolution-chip-set__chips {
-  max-width: 100%;
-}
-
-:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
-:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
-:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label {
-  overflow: hidden;
+:host ::ng-deep {
+  .mat-mdc-standard-chip{
+    .mdc-evolution-chip__cell--primary,
+    .mdc-evolution-chip__action--primary,
+    .mat-mdc-chip-action-label{
+      overflow: hidden;
+    }
+  }
 }
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
index f8a4f49a82..ee2fc29b96 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
@@ -66,7 +66,7 @@ export class EntityTypeSelectComponent implements ControlValueAccessor, OnInit,
   additionEntityTypes: {[key in string]: string} = {};
 
   @Input()
-  appearance: MatFormFieldAppearance = 'fill';
+  appearance: MatFormFieldAppearance = 'outline';
 
   @Input()
   @coerceBoolean()
diff --git a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
index 4515797a85..3fa79df85f 100644
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
+++ b/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
diff --git a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
index fb440477f8..ede06e97ad 100644
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
+++ b/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 = 'outline';
+
   @ViewChild('branchAutocomplete') matAutocomplete: MatAutocomplete;
   @ViewChild('branchInput', { read: MatAutocompleteTrigger, static: true }) autoCompleteTrigger: MatAutocompleteTrigger;
   @ViewChild('branchInput', {static: true}) branchInput: ElementRef<HTMLInputElement>;