diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts
index 6932860be4..6c0e378f57 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts
@@ -44,7 +44,7 @@ import {
   CalculatedFieldTestScriptDialogData,
   getCalculatedFieldArgumentsEditorCompleter,
   getCalculatedFieldArgumentsHighlights,
-  CalculatedFieldTypeTranslations,
+  CalculatedFieldTypeTranslations, CalculatedFieldType,
 } from '@shared/models/calculated-field.models';
 import {
   CalculatedFieldDebugDialogComponent,
@@ -109,8 +109,17 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
 
     this.defaultSortOrder = {property: 'name', direction: Direction.DESC};
 
-    const expressionColumn = new EntityTableColumn<CalculatedField>('expression', 'calculated-fields.expression', '33%', entity => entity.configuration?.expression);
+    const expressionColumn = new EntityTableColumn<CalculatedField>('expression', 'calculated-fields.expression', '300px');
     expressionColumn.sortable = false;
+    expressionColumn.cellContentFunction = entity => {
+      const expressionLabel = this.getExpressionLabel(entity);
+      return expressionLabel.length < 50
+        ? expressionLabel : `<span style="display: inline-block; width: 50ch">${expressionLabel.substring(0, 49)}…</span>`;
+    }
+    expressionColumn.cellTooltipFunction = entity => {
+      const expressionLabel = this.getExpressionLabel(entity);
+      return expressionLabel.length < 50 ? null : expressionLabel
+    };
 
     this.columns.push(new EntityTableColumn<CalculatedField>('name', 'common.name', '33%'));
     this.columns.push(new EntityTableColumn<CalculatedField>('type', 'common.type', '50px', entity => this.translate.instant(CalculatedFieldTypeTranslations.get(entity.type))));
@@ -146,6 +155,14 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
     );
   }
 
+  private getExpressionLabel(entity: CalculatedField): string {
+    if (entity.type === CalculatedFieldType.SCRIPT) {
+      return 'function calculate(' + Object.keys(entity.configuration.arguments).join(', ') + ')';
+    } else {
+      return entity.configuration.expression;
+    }
+  }
+
   fetchCalculatedFields(pageLink: PageLink): Observable<PageData<CalculatedField>> {
     return this.calculatedFieldsService.getCalculatedFields(this.entityId, pageLink);
   }
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
index 7e0f87a12e..b83a6ca520 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="fieldFormGroup" class="dialog-container flex size-full max-w-4xl flex-col">
+<div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex size-full max-w-4xl flex-col">
   <mat-toolbar color="primary">
     <h2>{{ 'entity.type-calculated-field' | translate}}</h2>
     <span class="flex-1"></span>
@@ -98,7 +98,6 @@
               required
               formControlName="expressionSCRIPT"
               functionName="calculate"
-              class="expression-edit"
               [functionArgs]="functionArgs$ | async"
               [disableUndefinedCheck]="true"
               [scriptLanguage]="ScriptLanguage.TBEL"
@@ -106,7 +105,7 @@
               [editorCompleter]="argumentsEditorCompleter$ | async"
               helpId="calculated-field/expression_fn"
             >
-              <div toolbarPrefixButton class="tb-primary-background script-lang-chip">{{ 'api-usage.tbel' | translate }}</div>
+              <div toolbarPrefixButton class="tb-primary-background tbel-script-lang-chip">{{ 'api-usage.tbel' | translate }}</div>
               <button toolbarSuffixButton
                       mat-icon-button
                       matTooltip="{{ 'common.test-function' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
index 0e994ed825..3bb2759274 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
@@ -13,39 +13,37 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
-  .dialog-container {
-    width: 869px;
-    max-width: 100%;
-  }
 
-  .script-lang-chip {
-    line-height: 20px;
-    font-size: 14px;
-    font-weight: 500;
-    color: white;
-    border-radius: 100px;
-    width: 70px;
-    display: flex;
-    justify-content: center;
-    margin-top: 2px;
-    margin-right: 4px;
-  }
+.calculated-field-dialog-container {
+  width: 869px;
+  max-width: 100%;
+}
+
+.tbel-script-lang-chip {
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  border-radius: 100px;
+  width: 70px;
+  min-width: 70px;
+  display: flex;
+  justify-content: center;
+  margin-top: 2px;
+  margin-right: 4px;
 }
 
-:host ::ng-deep {
-  .expression-edit {
-    .ace_tb {
-      &.ace_calculated-field {
-        &-key {
-          color: #C52F00;
-        }
-        &-ts, &-time-window, &-values, &-value, &-func {
-          color: #7214D0;
-        }
-        &-start-ts, &-end-ts, &-limit {
-          color: #185F2A;
-        }
+.tb-js-func {
+  .ace_tb {
+    &.ace_calculated-field {
+      &-key {
+        color: #C52F00;
+      }
+      &-ts, &-time-window, &-values, &-value, &-func {
+        color: #7214D0;
+      }
+      &-start-ts, &-end-ts, &-limit {
+        color: #185F2A;
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.ts
index 68abd646e3..a8f64f7cec 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, DestroyRef, Inject } from '@angular/core';
+import { Component, DestroyRef, Inject, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -45,6 +45,7 @@ import { Observable } from 'rxjs';
   selector: 'tb-calculated-field-dialog',
   templateUrl: './calculated-field-dialog.component.html',
   styleUrls: ['./calculated-field-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFieldDialogComponent, CalculatedField> {
 
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss
index 2187b47e0d..d944e2a683 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss
@@ -71,20 +71,4 @@
       background-image: url("../../../../../../../assets/split.js/grips/vertical.png");
     }
   }
-
-  .expression-edit {
-    .ace_tb {
-      &.ace_calculated-field {
-        &-key {
-          color: #C52F00;
-        }
-        &-ts, &-time-window, &-values, &-value, &-func {
-          color: #7214D0;
-        }
-        &-start-ts, &-end-ts, &-limit {
-          color: #185F2A;
-        }
-      }
-    }
-  }
 }