Adds a third line for comments

client/src/app/shared/components/icon-container/icon-container.component.scss

@@ -1,3 +1,19 @@
+@mixin icon-container($iconSize, $contentSize, $fontWeight) {
+    line-height: $iconSize;
+
+    & > mat-icon {
+        font-size: $iconSize;
+        width: $iconSize;
+        height: $iconSize;
+        margin-top: 0 !important;
+    }
+
+    & > .content-node {
+        font-size: $contentSize;
+        font-weight: $fontWeight;
+    }
+}
+
 os-icon-container {
     display: flex;
     align-items: center;
@@ -6,33 +22,16 @@ os-icon-container {
         margin-top: 5px;
     }
 
-    &.medium-container {
-        $size: 18px;
-        line-height: $size;
-
-        mat-icon {
-            font-size: $size;
-            height: $size;
-            width: $size;
-            margin-top: 0 !important;
+    &.small-container {
+        @include icon-container(12px, 12px, 400);
     }
+
+    &.medium-container {
+        @include icon-container(18px, 14px, 400);
     }
 
     &.large-container {
-        $size: 24px;
-        line-height: $size;
-
-        mat-icon {
-            font-size: $size;
-            width: $size;
-            height: $size;
-            margin-top: 0 !important;
-        }
-
-        .content-node {
-            font-size: 16px;
-            font-weight: 500;
-        }
+        @include icon-container(24px, 16px, 500);
     }
 
     .content-node {

client/src/app/shared/components/icon-container/icon-container.component.ts

@@ -11,12 +11,7 @@ export class IconContainerComponent {
      */
     @HostBinding('class')
     public get classes(): string {
-        switch (this.size) {
-            case 'medium':
-                return 'medium-container';
-            case 'large':
-                return 'large-container';
-        }
+        return `${this.size}-container`;
     }
 
     /**
@@ -29,7 +24,7 @@ export class IconContainerComponent {
      * Optional size property. Can be large, if needed.
      */
     @Input()
-    public size: 'medium' | 'large' = 'medium';
+    public size: 'small' | 'medium' | 'large' = 'medium';
 
     /**
      * Reverse text and icon.

client/src/app/site/agenda/components/agenda-list/agenda-list.component.html

@@ -17,7 +17,7 @@
 
 <os-list-view-table
     [listObservableProvider]="repo"
-    [vScrollFixed]="64"
+    [vScrollFixed]="76"
     [filterService]="filterService"
     [columns]="tableColumnDefinition"
     [multiSelect]="isMultiSelect"
@@ -40,6 +40,11 @@
                 <div *ngIf="showSubtitle" class="subtitle ellipsis-overflow">
                     {{ item.getSubtitle() }}
                 </div>
+                <div *ngIf="item.comment" class="subtitle ellipsis-overflow">
+                    <os-icon-container size="small" icon="comment" [noWrap]="true">
+                        {{ item.comment }}
+                    </os-icon-container>
+                </div>
             </os-icon-container>
         </div>
     </div>
@@ -56,9 +61,6 @@
                 </os-icon-container>
             </div>
         </div>
-        <div *ngIf="item.comment" class="align-right">
-            <os-icon-container [matTooltip]="item.comment" icon="comment"></os-icon-container>
-        </div>
     </div>
 
     <!-- Menu -->