Inventory: fixes / layout (#11948)

Co-authored-by: Sabe Jones <sabrecat@gmail.com>

website/client/src/components/ui/toggleSwitch.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="popover-box">
     <div
-      :id="containerId"
       class="clearfix toggle-switch-outer"
     >
       <div
         v-if="label"
         class="float-left toggle-switch-description"
-        :class="hoverText ? 'hasPopOver' : ''"
+        :class="{'bold': boldLabel}"
       >
         <span>{{ label }}</span>
       </div>
+      <span
+        v-if="hoverText"
+        :id="containerId"
+        class="svg-icon inline icon-16  float-left"
+        v-html="icons.information"
+      >
+
+      </span>
       <div class="toggle-switch float-left">
         <input
           :id="toggleId"
@@ -51,11 +58,16 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
+  .toggle-switch-outer {
+    display: flex;
+    align-items: center;
+  }
+
   .toggle-switch {
     position: relative;
     width: 40px;
     user-select: none;
-    margin-left: 9px;
+    margin-left: 0.5rem;
   }
 
   .toggle-switch-description {
@@ -64,6 +76,10 @@
     }
   }
 
+  .svg-icon {
+    margin: 2px 0.5rem 2px 0.5rem;
+  }
+
   .toggle-switch-checkbox {
     display: none;
   }
@@ -74,7 +90,7 @@
     cursor: pointer;
     border-radius: 100px;
     margin-bottom: 0px;
-    margin-top: 3px;
+    margin-top: 2px;
   }
 
   .toggle-switch-inner {
@@ -110,7 +126,7 @@
     display: block;
     width: 20px;
     margin: -2px;
-    margin-top: 1px;
+    margin-top: 0;
     height: 20px;
     background: $white;
     position: absolute;
@@ -133,9 +149,15 @@
   .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
     right: 0px;
   }
+
+  .bold {
+    font-weight: bold;
+  }
 </style>
 
 <script>
+import svgInformation from '@/assets/svg/information.svg';
+
 export default {
   model: {
     prop: 'checked',
@@ -148,6 +170,10 @@ export default {
     label: {
       type: String,
     },
+    boldLabel: {
+      type: Boolean,
+      default: false,
+    },
     checked: {
       type: Boolean,
       default: false,
@@ -163,6 +189,10 @@ export default {
       // The container requires a unique id to link it to the pop-over
       containerId: this.generateId(),
       focused: false,
+
+      icons: Object.freeze({
+        information: svgInformation,
+      }),
     };
   },
   computed: {