diff --git a/assets/styles/configuration.scss b/assets/styles/configuration.scss
index 6947f7b1..f73e8ca8 100644
--- a/assets/styles/configuration.scss
+++ b/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 {
diff --git a/client/common/configuration/elements/channel-emojis.ts b/client/common/configuration/elements/channel-emojis.ts
index 425c3b01..876111da 100644
--- a/client/common/configuration/elements/channel-emojis.ts
+++ b/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),
diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts
index cb88d75e..0267397a 100644
--- a/client/common/lib/elements/dynamic-table-form.ts
+++ b/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`
- ${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))}
+
+
+
+ ${columns.map(([_, v]) => this._renderHeaderDescriptionCell(v))}
`
}
private readonly _renderHeaderCell = (headerCellData: DynamicFormHeaderCellData): TemplateResult => {
- return html`