style fixes

ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html

@@ -18,19 +18,19 @@
 <div class="flex flex-col gap-3">
     <div class="tb-form-table">
         <div class="tb-form-table-header">
-            <div class="tb-form-table-header-cell w-1/6 lt-sm:!w-1/3 lt-md:w-1/4" tbTruncateWithTooltip>{{ 'calculated-fields.argument-name' | translate }}</div>
-            <div class="tb-form-table-header-cell w-1/3 lt-sm:hidden">{{ 'calculated-fields.datasource' | translate }}</div>
+            <div class="argument-name-field tb-form-table-header-cell w-1/6 xs:w-1/3 sm:w-1/4" tbTruncateWithTooltip>{{ 'calculated-fields.argument-name' | translate }}</div>
+            <div class="tb-form-table-header-cell w-1/3 xs:hidden">{{ 'calculated-fields.datasource' | translate }}</div>
             <div class="tb-form-table-header-cell w-1/6 lt-md:hidden">{{ 'common.type' | translate }}</div>
-            <div class="tb-form-table-header-cell w-1/6 lt-sm:w-1/3">{{ 'entity.key' | translate }}</div>
-            <div class="tb-form-table-header-cell w-16 min-w-16"></div>
+            <div class="tb-form-table-header-cell w-1/6 xs:w-1/3">{{ 'entity.key' | translate }}</div>
+            <div class="tb-form-table-header-cell w-20 min-w-20"></div>
         </div>
         <div class="tb-form-table-body">
             @for (group of argumentsFormArray.controls; track group) {
                 <div [formGroup]="group" class="tb-form-table-row">
-                    <mat-form-field appearance="outline" class="tb-inline-field w-1/6 lt-sm:!w-1/3 lt-md:w-1/4" subscriptSizing="dynamic">
+                    <mat-form-field appearance="outline" class="argument-name-field tb-inline-field w-1/6 xs:w-1/3 sm:w-1/4" subscriptSizing="dynamic">
                         <input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}">
                     </mat-form-field>
-                    <section class="flex w-1/3 gap-2 lt-sm:hidden">
+                    <section class="datasource-field flex w-1/3 gap-2 xs:hidden">
                         @if (group.get('refEntityId')?.get('id')?.value) {
                             <ng-container [formGroup]="group.get('refEntityId')">
                                 <mat-form-field appearance="outline" class="tb-inline-field flex-1" subscriptSizing="dynamic">
@@ -72,7 +72,7 @@
                                 </mat-select>
                             }
                         </mat-form-field>
-                        <mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6 lt-sm:w-1/3">
+                        <mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6 xs:w-1/3">
                             <mat-chip>
                                 <div tbTruncateWithTooltip>
                                     {{ group.get('refEntityKey').get('key').value }}
@@ -80,7 +80,7 @@
                             </mat-chip>
                         </mat-chip-listbox>
                     </ng-container>
-                    <div class="tb-form-table-row-cell-buttons flex w-16 min-w-16">
+                    <div class="tb-form-table-row-cell-buttons flex w-20 min-w-20">
                         <button type="button"
                                 mat-icon-button
                                 #button

ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss

@@ -13,12 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '../../../../../../../scss/constants' as constants;
+
 :host {
   .tb-form-table-row-cell-buttons {
     --mat-badge-legacy-small-size-container-size: 8px;
     --mat-badge-small-size-container-overlap-offset: -5px;
     --mat-badge-small-size-text-size: 0;
   }
+
+  .argument-name-field {
+    @media #{constants.$mat-sm} {
+      min-width: 25%;
+      max-width: 25%;
+    }
+    @media #{constants.$mat-xs} {
+      min-width: 33%;
+      max-width: 33%;
+    }
+  }
+
+  .datasource-field {
+    min-width: 33%;
+    max-width: 33%;
+  }
 }
 
 :host ::ng-deep {

ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="debug-dialog-container flex max-w-5xl flex-col lt-sm:h-full lt-sm:!w-full">
+<div class="debug-dialog-container flex flex-col xs:h-full">
   <mat-toolbar color="primary">
     <h2>{{ 'calculated-fields.debugging' | translate}}</h2>
     <span class="flex-1"></span>
@@ -25,7 +25,7 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <div mat-dialog-content class="tb-form-panel stroked debug-dialog-content lt-sm:flex-1">
+  <div mat-dialog-content class="tb-form-panel stroked debug-dialog-content xs:flex-1">
     <tb-event-table
       [tenantId]="data.tenantId"
       [debugEventTypes]="[debugEventTypes.DEBUG_CALCULATED_FIELD]"

ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.scss

@@ -15,7 +15,8 @@
  */
 :host {
   .debug-dialog-container {
-    width: 80vw;
+    width: 1080px;
+    max-width: 100%;
 
     .debug-dialog-content {
       height: 65vh;

ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@use '../../../../../../../scss/constants' as constants;
 
 :host {
   .dialog-container {