Fix Checkbox style error

Due to a (known) bug, the checkbox style is a bit unstable in combination with certain alignments. Therefore, distinguish the style in a table alignment from others by introducing a separate styling for both.

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>

WebUI/src/assets/css/compontents.css

@@ -436,6 +436,29 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+
+    &::after {
+      content: " ";
+      width: 14px;
+      height: 14px;
+      background: url("@/assets/svg/right.svg") 0px 0px no-repeat;
+      background-size: contain;
+
+    }
+  }
+}
+
+.v-checkbox-control-table {
+  border: 1px solid var(--compontents-main);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+
+  &.v-checkbox-checked-table {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     margin: 0 auto;
 
 

WebUI/src/components/InstallationManagement.vue

@@ -35,8 +35,8 @@
             </td>
             <td>
               <button v-if="component.status !== 'running' && !component.isLoading"
-                      class="v-checkbox-control flex-none w-5 h-5"
-                      :class="{ 'v-checkbox-checked': component.enabled}"
+                      class="v-checkbox-control-table flex-none w-5 h-5"
+                      :class="{ 'v-checkbox-checked-table': component.enabled}"
                       @click="() => {
                         if (component.enabled && !component.isSetUp) {
                           enabledComponents.delete(component.serviceName)