Dynamic table UI:

* margin bottom
* add row button on left, to be more visible

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);
 

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 class="dynamic-table-add-row-cell">
-      <td>
         <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>`
   }