Fix layout of the "Solve Conflicts" modal (#1470)

* Fix: misaligned buttons in the doc conflicts confirmation modal

* Fix: npm audit failures

* Fix: bump Node used in CI to 20 to address failure with latest 'npm'

Author: Antonio-Maranhao

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: '18'
+        node-version: '20'
     - name: Install npm packages
       run: |
         npm install -g npm@latest
@@ -39,7 +39,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: '18'
+        node-version: '20'
         cache: 'npm'
     - run: ./bin/build-couchdb-dev.sh
       env:

app/addons/documents/assets/scss/revision-browser.scss

@@ -142,7 +142,12 @@ div#dashboard-content div.revision-wrapper {
 }
 
 .delete-conflicts-modal {
-  .do-not-show-again label {
-    font-size: 13px;
+  .do-not-show-again {
+    &.form-check {
+      padding-left: 2em;
+    }
+    label {
+      font-size: 13px;
+    }
   }
 }

app/addons/documents/rev-browser/components/confirmmodal.js

@@ -54,31 +54,24 @@ export default class ConfirmModal extends React.Component {
           </p>
         </Modal.Body>
         <Modal.Footer>
-
           <div className='col-12'>
             <Form.Check type="checkbox"
               className='do-not-show-again'
               label="Do not show this warning message again"
               onChange={() => { this.setState({checked: !this.state.checked }); }} />
           </div>
-
-          <div className="col-auto">
-            <Button href="#"
-              variant="cf-cancel"
-              className='cancel-link'
-              onClick={this.close}
-              data-bypass="true"
-            >
-            Cancel
-            </Button>
-          </div>
-          <div className="col-auto">
-            <ConfirmButton
-              onClick={this.onDeleteConflicts}
-              text="Delete Revisions"
-              variant="danger" />
-          </div>
-
+          <Button href="#"
+            variant="cf-cancel"
+            className='cancel-link'
+            onClick={this.close}
+            data-bypass="true"
+          >
+          Cancel
+          </Button>
+          <ConfirmButton
+            onClick={this.onDeleteConflicts}
+            text="Delete Revisions"
+            variant="danger" />
         </Modal.Footer>
       </Modal>
     );

package-lock.json

@@ -10,7 +10,7 @@
     "fauxton": "./bin/fauxton"
   },
   "engines": {
-    "node": "^18"
+    "node": "^20"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",