From db0af3763b0c3a00622b9600ecb65c11ad8922de Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 22 Dec 2022 15:12:47 +0100
Subject: [PATCH] web/elements: fix alignment with checkbox in table

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/table/Table.ts | 53 +++++++++++++++++----------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index a2e780b24..bfc0c50cd 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -286,34 +286,35 @@ export abstract class Table<T> extends AKElement {
                 <tr role="row">
                     ${this.checkbox
                         ? html`<td class="pf-c-table__check" role="cell">
-                              <input
-                                  type="checkbox"
-                                  .checked=${this.selectedElements.indexOf(item) >= 0}
-                                  @input=${(ev: InputEvent) => {
-                                      if ((ev.target as HTMLInputElement).checked) {
-                                          // Add item to selected
-                                          this.selectedElements.push(item);
-                                      } else {
-                                          // Get index of item and remove if selected
-                                          const index = this.selectedElements.indexOf(item);
-                                          if (index <= -1) return;
-                                          this.selectedElements.splice(index, 1);
-                                      }
-                                      this.requestUpdate();
-                                      // Unset select-all if selectedElements is empty
-                                      if (this.selectedElements.length < 1) {
-                                          const selectAllCheckbox =
-                                              this.shadowRoot?.querySelector<HTMLInputElement>(
-                                                  "[name=select-all]",
-                                              );
-                                          if (!selectAllCheckbox) {
-                                              return;
+                              <label
+                                  ><input
+                                      type="checkbox"
+                                      .checked=${this.selectedElements.indexOf(item) >= 0}
+                                      @input=${(ev: InputEvent) => {
+                                          if ((ev.target as HTMLInputElement).checked) {
+                                              // Add item to selected
+                                              this.selectedElements.push(item);
+                                          } else {
+                                              // Get index of item and remove if selected
+                                              const index = this.selectedElements.indexOf(item);
+                                              if (index <= -1) return;
+                                              this.selectedElements.splice(index, 1);
                                           }
-                                          selectAllCheckbox.checked = false;
                                           this.requestUpdate();
-                                      }
-                                  }}
-                              />
+                                          // Unset select-all if selectedElements is empty
+                                          if (this.selectedElements.length < 1) {
+                                              const selectAllCheckbox =
+                                                  this.shadowRoot?.querySelector<HTMLInputElement>(
+                                                      "[name=select-all]",
+                                                  );
+                                              if (!selectAllCheckbox) {
+                                                  return;
+                                              }
+                                              selectAllCheckbox.checked = false;
+                                              this.requestUpdate();
+                                          }
+                                      }}
+                              /></label>
                           </td>`
                         : html``}
                     ${this.expandable