Timewindow: fix styles for interval options configuration on mobile

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html

@@ -23,7 +23,7 @@
   </div>
   <div class="tb-form-table">
     <div class="tb-form-table-header">
-      <div class="tb-form-table-header-cell tb-interval">
+      <div class="tb-form-table-header-cell tb-interval" tbTruncateWithTooltip>
         <mat-checkbox color="warn"
                       (click)="$event.stopPropagation()"
                       [indeterminate]="getIndeterminate()"
@@ -33,22 +33,21 @@
         {{ "timewindow.interval" | translate }}
       </div>
       <ng-container *ngIf="aggregation">
-        <div class="tb-form-table-header-cell tb-agg-interval-header">{{"timewindow.allowed-agg-intervals" | translate }}</div>
-        <div class="tb-form-table-header-cell tb-agg-interval-header">{{"timewindow.default-agg-interval" | translate }}</div>
+        <div class="tb-form-table-header-cell tb-agg-interval-header" tbTruncateWithTooltip>{{"timewindow.allowed-agg-intervals" | translate }}</div>
+        <div class="tb-form-table-header-cell tb-agg-interval-header" tbTruncateWithTooltip>{{"timewindow.default-agg-interval" | translate }}</div>
       </ng-container>
     </div>
     <div class="tb-form-table-body" formArrayName="intervals">
       <ng-container *ngFor="let interval of intervalsFormArray.controls; let i = index; trackBy: trackByElement">
         <div [formGroupName]="i" class="tb-form-table-row">
           <div class="tb-form-table-row-cell tb-interval">
-            <mat-checkbox formControlName="enabled" color="primary">
+            <mat-checkbox class="tb-interval-option" formControlName="enabled" color="primary">
               <mat-label>{{ interval.get('name').value }}</mat-label>
             </mat-checkbox>
           </div>
           <ng-container *ngIf="aggregation">
             <div class="tb-form-table-row-cell tb-agg-interval">
               <tb-grouping-interval-options
-                class="tb-inline-field"
                 formControlName="aggIntervalsConfig"
                 [min]="minAggInterval(interval.get('value').value)"
                 [max]="maxAggInterval(interval.get('value').value)"

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../scss/constants';
+
 :host {
   .tb-interval-options-form {
     height: 100%;
@@ -27,12 +29,18 @@
 
     .tb-form-table-header-cell, .tb-form-table-row-cell {
       &.tb-interval {
-        flex: 1 1 30%;
-        width: 30%;
+        flex: 1 1 100%;
+        min-width: calc(30% - 8px);
+        max-width: calc(30% - 8px);
+        @media #{$mat-gt-md} {
+          min-width: calc(30% - 12px);
+          max-width: calc(30% - 12px);
+        }
       }
       &.tb-agg-interval {
-        flex: 1 1 70%;
-        width: 70%;
+        flex: 1 1 100%;
+        min-width: 70%;
+        max-width: 70%;
       }
     }
 
@@ -44,6 +52,22 @@
     .tb-form-hint {
       flex-shrink: 0;
     }
+
+    ::ng-deep {
+      .tb-interval-option {
+        display: block;
+
+        .mdc-form-field {
+          width: 100%;
+        }
+
+        .mdc-label {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
   }
 }