problems: font size for alert list layout

src/panel-triggers/components/AlertList/AlertList.tsx

@@ -58,11 +58,14 @@ export default class AlertList extends PureComponent<AlertListProps, AlertListSt
   render() {
     const { problems, panelOptions } = this.props;
     const currentProblems = this.getCurrentProblems(this.state.page);
+    let fontSize = parseInt(panelOptions.fontSize.slice(0, panelOptions.fontSize.length - 1), 10);
+    fontSize = fontSize && fontSize !== 100 ? fontSize : null;
+    const alertListClass = classNames('alert-rule-list', { [`font-size--${fontSize}`]: fontSize });
 
     return (
       <div className="triggers-panel-container" key="alertListContainer">
         <section className="card-section card-list-layout-list">
-          <ol className="alert-rule-list">
+          <ol className={alertListClass}>
             {currentProblems.map(problem =>
               <AlertCard
                 key={problem.triggerid}

src/sass/_panel-triggers.scss

@@ -19,6 +19,7 @@
           display: flex;
           max-height: 1.6em;
           overflow: hidden;
+          align-items: center;
           padding-right: 1em;
 
           &.zbx-description--newline {
@@ -37,6 +38,56 @@
 
         }
       }
+
+      @for $i from 8 through 9 {
+        &.font-size--#{$i * 10} {
+          &,
+          .alert-rule-item__name {
+            font-size: 1% * $i * 10;
+          }
+
+          .alert-rule-item__icon {
+            width: unset;
+            font-size: 1% * $i * 10;
+          }
+
+          .alert-rule-item__time,
+          .alert-rule-item__text,
+          .zabbix-hostname {
+            font-size: 1% * $i * 10 * 0.8;
+          }
+
+          .zbx-trigger-tags .label-tag {
+            font-size: 1% * $i * 10 * 0.6;
+            padding: 0.3em 0.3em;
+          }
+        }
+      }
+
+      @for $i from 11 through 25 {
+        &.font-size--#{$i * 10} {
+          &,
+          .alert-rule-item__name {
+            font-size: 1% * $i * 10;
+          }
+
+          .alert-rule-item__icon {
+            width: unset;
+            font-size: 1% * $i * 10;
+          }
+
+          .alert-rule-item__time,
+          .alert-rule-item__text,
+          .zabbix-hostname {
+            font-size: 1% * $i * 10 * 0.8;
+          }
+
+          .zbx-trigger-tags .label-tag {
+            font-size: 1% * $i * 10 * 0.6;
+            padding: 0.3em 0.3em;
+          }
+        }
+      }
     }
   }