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>

3 files changed, 32 insertions, 19 deletions

diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
index 22bcd65db..ca9cd863b 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
+++ b/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">
-      <tr>
-        <td>
-          <span>{{ emojiMarkup.value }}</span>
-        </td>
-        <td>
-          <code>:{{ emojiMarkup.key }}:</code>
-        </td>
-      </tr>
-    </table>
+    <div class="emoji-flex">
+      <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
+        {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
+      </div>
+    </div>
   </div>
 </ng-template>
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index 2be187670..d938e2e28 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -99,13 +99,22 @@ form {
   }
 }
 
-.table-emoji {
-  td {
-    &:first-child {
-      width: 20px;
+.emoji-flex {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+
+  .emoji-flex-item {
+    text-align: left;
+    margin: auto;
+    min-width: 227px;
+    flex: 1;
+
+    code {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 5px;
     }
-
-    vertical-align: top;
   }
 }
 
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
index d746a614b..4bde5c53d 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
+++ b/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')
+
+    // 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 emojiMarkup
+    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 () {