new design(?)

src/client/sass/lib/_settingsSite.scss

@@ -13,6 +13,7 @@
     #settings-fragments {
       > * {
         display: none;
+
         &.active {
           display: block;
         }
@@ -24,26 +25,31 @@
 .switch {
   position: relative;
   display: inline-block;
+  height: initial;
 
-  @include breakpoint(small down){
+  @include breakpoint(small down) {
     font-size: 0.6em;
   }
-  @include breakpoint(smedium down){
+  @include breakpoint(smedium down) {
     font-size: 0.7em;
   }
+
   input {
 
     display: none;
-    &:checked + .slider{
+
+    &:checked + .slider {
       //background-color: #2196F3;
-      &:before{
+      &:before {
         transform: translateX(1.5em);
       }
     }
-    &:focus + .slider{
+
+    &:focus + .slider {
       //box-shadow: 0 0 1px #2196F3;
     }
   }
+
   .slider {
     display: inline-block;
     position: relative;
@@ -55,7 +61,8 @@
     transition: .4s;
     margin-bottom: 0;
     margin-top: 0;
-    &:before{
+
+    &:before {
       position: absolute;
       content: "";
       height: 1.1em;
@@ -67,30 +74,38 @@
       border-radius: 50%;
     }
   }
-  img, svg{
+
+  img, svg {
     width: 1.4em;
     display: inline;
     vertical-align: initial;
-    path{
+
+    path {
       stroke-color: inherit;
     }
   }
 }
-label{
+
+label {
   font-size: 1em !important;
 
 }
-.setting-row:not(.hidden){
+
+.setting-row:not(.hidden) {
   line-height: 1;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+  display: flex;
+  padding: 0.5rem 0.4rem;
+  align-items: center;
+
   width: 100%;
   cursor: pointer;
   background: rgba(195, 195, 195, 0.13);
-  //display: inline-block;
 
-  input[type=checkbox]
-  {
+  > * {
+    flex: 1;
+  }
+
+  input[type=checkbox] {
     margin: 0;
   }
 }