Improve markdown-it emoji list column display (#3253)

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>

client/src/app/+videos/+video-watch/comment/video-comment-add.component.html

@@ -85,15 +85,10 @@
     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
   </div>
   <div class="modal-body">
-    <table class="table-emoji" *ngFor="let emojiMarkup of emojiMarkupList | keyvalue">
+    <div class="emoji-flex">
-      <tr>
+      <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
-        <td>
+        {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
-          <span>{{ emojiMarkup.value }}</span>
+      </div>
-        </td>
+    </div>
-        <td>
-          <code>:{{ emojiMarkup.key }}:</code>
-        </td>
-      </tr>
-    </table>
   </div>
 </ng-template>

client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss

@@ -99,13 +99,22 @@ form {
   }
 }
 
-.table-emoji {
+.emoji-flex {
-  td {
+  display: flex;
-    &:first-child {
+  flex-flow: row wrap;
-      width: 20px;
+  align-items: center;
-    }
 
-    vertical-align: top;
+  .emoji-flex-item {
+    text-align: left;
+    margin: auto;
+    min-width: 227px;
+    flex: 1;
+
+    code {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 5px;
+    }
   }
 }
 

client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts

@@ -43,9 +43,18 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
   }
 
   get emojiMarkupList () {
-    const emojiMarkup = require('markdown-it-emoji/lib/data/light.json')
+    const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
 
-    return emojiMarkup
+    // Populate emoji-markup-list from object to array to avoid keys alphabetical order
+    const emojiMarkupArrayList = []
+    for (const emojiMarkupName in emojiMarkupObjectList) {
+      if (emojiMarkupName) {
+        const emoji = emojiMarkupObjectList[emojiMarkupName]
+        emojiMarkupArrayList.push([emoji, emojiMarkupName])
+      }
+    }
+
+    return emojiMarkupArrayList
   }
 
   ngOnInit () {
@@ -89,7 +98,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
 
   openEmojiModal (event: any) {
     event.preventDefault()
-    this.modalService.open(this.emojiModal, { backdrop: true })
+    this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
   }
 
   hideModals () {