Better .pull-right class implementation.

platypush/backend/http/webapp/src/components/elements/Slider.vue

@@ -121,13 +121,19 @@ $label-width: 3em;
 
   .range-labels {
     width: 100%;
+    display: flex;
 
     &.with-label {
       width: calc(100% - $label-width);
     }
 
+    .left {
+      text-align: left;
+    }
+
     .right {
       @extend .pull-right;
+      flex-grow: 1;
     }
   }
 

platypush/backend/http/webapp/src/components/panels/Entities/Device.vue

@@ -8,7 +8,7 @@
           :error="error" />
       </div>
 
-      <div class="col-12 label">
+      <div class="col-11 label">
         <div class="name" v-text="value.name" />
       </div>
     </div>

platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue

@@ -13,13 +13,13 @@
       </div>
 
       <div class="col-s-4 col-m-3 buttons pull-right">
+        <span class="value-percent"
+          v-text="parsedValue"
+          v-if="parsedValue != null" />
         <button @click.stop="collapsed = !collapsed">
           <i class="fas"
             :class="{'fa-angle-up': !collapsed, 'fa-angle-down': collapsed}" />
         </button>
-        <span class="value-percent"
-          v-text="parsedValue"
-          v-if="parsedValue != null" />
       </div>
     </div>
 

platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue

@@ -14,9 +14,9 @@
 
       <div class="col-s-3 col-m-2 pull-right"
           v-if="value.value != null">
+        <span class="value" v-text="value.value" />
         <span class="unit" v-text="value.unit"
           v-if="value.unit != null" />
-        <span class="value" v-text="value.value" />
       </div>
     </div>
   </div>

platypush/backend/http/webapp/src/components/panels/Entities/common.scss

@@ -21,12 +21,10 @@
     }
 
     .pull-right {
-      display: inline-flex;
-      align-items: center;
-      direction: rtl;
       padding-right: 0.5em;
 
       :deep(.power-switch) {
+        @include pull-right;
         margin-top: 0.25em;
       }
     }

platypush/backend/http/webapp/src/style/layout.scss

@@ -150,21 +150,26 @@ $widths: (
 }
 
 .vertical-center {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .horizontal-center {
-    display: flex;
-    justify-content: center;
-    margin-left: auto;
-    margin-right: auto;
+  display: flex;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin pull-right {
+  display: inline-flex;
+  text-align: right;
+  justify-content: right;
+  flex-grow: 1;
 }
 
 .pull-right {
-  text-align: right;
-  float: right;
-  justify-content: right;
+  @include pull-right;
 }
 
 .hidden {