Dynamic table description: always displayed, in a separate line.

assets/styles/configuration.scss

@@ -223,8 +223,12 @@ $small-view: 800px;
     }
   }
 
+  .peertube-livechat-emojis-col-sn {
+    width: 30%;
+  }
+
   .peertube-livechat-emojis-col-file {
-    width: 150px;
+    width: 65%;
   }
 
   .peertube-plugin-livechat-configuration-actions {
@@ -264,6 +268,11 @@ livechat-dynamic-table-form {
     tbody tr:nth-child(odd) {
       background-color: var(--greySecondaryBackgroundColor);
     }
+
+    .livechat-dynamic-table-form-description-header {
+      font-size: small;
+      font-weight: lighter;
+    }
   }
 
   button {

client/common/configuration/elements/channel-emojis.ts

@@ -51,7 +51,8 @@ export class ChannelEmojisElement extends LivechatElement {
     const tableHeaderList: DynamicFormHeader = {
       sn: {
         colName: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME),
-        description: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC)
+        description: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC),
+        headerClassList: ['peertube-livechat-emojis-col-sn']
       },
       url: {
         colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE),

client/common/lib/elements/dynamic-table-form.ts

@@ -218,30 +218,42 @@ export class DynamicTableFormElement extends LivechatElement {
   }
 
   private readonly _renderHeader = (): TemplateResult => {
+    const columns = Object.entries(this.header)
+      .sort(([k1, _1], [k2, _2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
     return html`<thead>
       <tr>
-        ${Object.entries(this.header)
-                .sort(([k1, _1], [k2, _2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
-                .map(([_, v]) => this._renderHeaderCell(v))}
+        ${columns.map(([_, v]) => this._renderHeaderCell(v))}
+        <th scope="col"></th>
+      </tr>
+      <tr>
+        ${columns.map(([_, v]) => this._renderHeaderDescriptionCell(v))}
         <th scope="col"></th>
       </tr>
     </thead>`
   }
 
   private readonly _renderHeaderCell = (headerCellData: DynamicFormHeaderCellData): TemplateResult => {
-    return html`<th scope="col">
+    return html`<th scope="col" class=${headerCellData.headerClassList?.join(' ') ?? ''}>
       <div
         data-toggle="tooltip"
         data-placement="bottom"
         data-html="true"
-        title=${headerCellData.description}
-        class=${headerCellData.headerClassList?.join(' ') ?? ''}
       >
         ${headerCellData.colName}
       </div>
     </th>`
   }
 
+  private _renderHeaderDescriptionCell (headerCellData: DynamicFormHeaderCellData): TemplateResult {
+    const classList = ['livechat-dynamic-table-form-description-header']
+    if (headerCellData.headerClassList) {
+      classList.push(...headerCellData.headerClassList)
+    }
+    return html`<th scope="col" class=${classList.join(' ')}>
+      ${headerCellData.description}
+    </th>`
+  }
+
   private readonly _renderDataRow = (rowData: DynamicTableRowData): TemplateResult => {
     const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}`