diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
index db3e67653c..c32afb983a 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
@@ -42,7 +42,7 @@
         <div [formGroupName]="i" class="tb-form-table-row">
           <div class="tb-form-table-row-cell tb-interval">
             <mat-checkbox class="tb-interval-option" formControlName="enabled" color="primary">
-              <mat-label>{{ interval.get('name').value }}</mat-label>
+              <mat-label tbTruncateWithTooltip>{{ interval.get('name').value }}</mat-label>
             </mat-checkbox>
           </div>
           <ng-container *ngIf="aggregation">
diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
index f5eb1db5f4..26747f9006 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
@@ -59,9 +59,10 @@
         }
 
         .mdc-label {
-          white-space: nowrap;
           overflow: hidden;
-          text-overflow: ellipsis;
+          mat-label {
+            display: block;
+          }
         }
       }
     }