From f1e9d1dfec13afebdad5671fa5e06455ca412391 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Thu, 13 Jun 2024 15:21:31 +0200
Subject: [PATCH] Dynamic table UI:

* margin bottom
* add row button on left, to be more visible
---
 assets/styles/configuration.scss                 | 7 +++++++
 client/common/lib/elements/dynamic-table-form.ts | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/assets/styles/configuration.scss b/assets/styles/configuration.scss
index 4b64052c..c310ca63 100644
--- a/assets/styles/configuration.scss
+++ b/assets/styles/configuration.scss
@@ -256,6 +256,9 @@ livechat-dynamic-table-form {
   // We need this variable to be known at that time
   $bs-green: #39cc0b;
 
+  display: block;
+  margin-bottom: 3rem;
+
   table {
     table-layout: fixed;
     text-align: center;
@@ -291,6 +294,10 @@ livechat-dynamic-table-form {
     }
   }
 
+  .dynamic-table-add-row-cell {
+    text-align: left;
+  }
+
   .dynamic-table-add-row {
     background-color: var(--bs-green);
 
diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts
index bb51c906..26a2ba22 100644
--- a/client/common/lib/elements/dynamic-table-form.ts
+++ b/client/common/lib/elements/dynamic-table-form.ts
@@ -283,10 +283,10 @@ export class DynamicTableFormElement extends LivechatElement {
     if (this.maxLines && this._rowsById.length >= this.maxLines) {
       return html``
     }
+    // Note: the addRow button is in first column, so it won't be hidden if screen not wide enough.
     return html`<tfoot>
     <tr>
-      ${Object.values(this.header).map(() => html`<td></td>`)}
-      <td>
+      <td class="dynamic-table-add-row-cell">
         <button type="button"
           class="peertube-button-link orange-button dynamic-table-add-row"
           .title=${ptTr(LOC_ACTION_ADD_ENTRY) as any}
@@ -295,6 +295,7 @@ export class DynamicTableFormElement extends LivechatElement {
           ${unsafeHTML(AddSVG)}
         </button>
       </td>
+      ${Object.values(this.header).map(() => html`<td></td>`)}
     </tr>
   </tfoot>`
   }