fix(ui): label is inline with neighboring labels (toggle component)

front/src/components/ui/Toggle.vue

@@ -21,10 +21,7 @@ const diameter = big ? '28px' : '20px'
       type="checkbox"
       style="opacity: 0; /* Hide even before stylesheet is loaded */"
     >
-    <span
+    <span v-if="label">{{ label }}</span>
-      v-if="label"
-      :class="[$props.big ? $style.big : '']"
-    >{{ label }}</span>
   </label>
 </template>
 
@@ -71,28 +68,19 @@ const diameter = big ? '28px' : '20px'
     aspect-ratio: 2;
     background-color: var(--void-color);
     left: 0;
-    top: var(--padding);
+    top: calc(var(--padding) * 2 - var(--diameter) / 2);
   }
   &::after {
     height: calc(var(--diameter) - var(--lineWidth) * 2);
     aspect-ratio: 1;
     background-color: var(--pin-color);
     left: var(--lineWidth);
-    top: calc(var(--padding) + var(--lineWidth));
+    top: calc(var(--padding) * 2 - var(--diameter) / 2 + var(--lineWidth));
     transition: all .2s;
   }
 
   > span {
-    padding-left: calc(var(--diameter) + 8px);
+    padding-left: calc(var(--diameter) * 2 - 12px);
-    position: relative;
-    top: 2px;
-  }
-
-  > span.big {
-    padding-left: calc(var(--diameter) + 16px);
-    position: relative;
-    top: 6px;
-    font-size: 16px;
   }
 }
 </style>

front/ui-docs/components/ui/toggle.md

@@ -57,9 +57,14 @@ Pass a `big` prop to create a larger toggle.
 <Toggle
    big
    v-model="toggle"
+   label="I am big"
 />
 ```
 
-<Toggle big v-model="toggle" />
+<Toggle
+   big
+   v-model="toggle"
+   label="I am big"
+/>
 
 </Layout>