Fixed entities panel mobile layout

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

@@ -59,7 +59,7 @@ export default {
     display: none;
     & + label {
       border-radius: 1em;
-      display: block;
+      display: inline-flex;
       cursor: pointer;
       position: relative;
       transition: box-shadow .4s;

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

@@ -3,11 +3,11 @@
     <Loading v-if="loading" />
 
     <header>
-      <div class="col-11">
+      <div class="col-11 left">
         <Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
       </div>
 
-      <div class="col-1 pull-right">
+      <div class="col-1 right">
         <button title="Refresh" @click="refresh">
           <i class="fa fa-sync-alt" />
         </button>
@@ -230,8 +230,8 @@ export default {
       this.entities[entityId] = {
         ...event.entity,
         meta: {
-          ...(event.entity?.meta || {}),
           ...(this.entities[entityId]?.meta || {}),
+          ...(event.entity?.meta || {}),
         },
       }
     },
@@ -266,8 +266,6 @@ export default {
 
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
   overflow: auto;
   color: $default-fg-2;
   font-weight: 400;
@@ -287,17 +285,28 @@ export default {
     display: flex;
     background: $default-bg-2;
     box-shadow: $border-shadow-bottom;
+    position: relative;
+
+    .right {
+      position: absolute;
+      right: 0;
+      text-align: right;
+      margin-right: 0.5em;
+      padding-right: 0.5em;
+
+      button {
+        padding: 0.5em 0;
+      }
+    }
   }
 
   .groups-canvas {
     width: 100%;
     height: calc(100% - #{$selector-height});
-    display: flex;
+    overflow: auto;
-    flex-direction: column;
   }
 
   .groups-container {
-    overflow: auto;
     @include from($desktop) {
       column-count: var(--groups-per-row);
     }
@@ -310,10 +319,16 @@ export default {
     padding: $main-margin 0;
     display: flex;
     break-inside: avoid;
-    padding: $main-margin;
+
+    @include from ($tablet) {
+      padding: $main-margin;
+    }
 
     .frame {
-      max-height: calc(100% - #{2 * $main-margin});
+      @include from($desktop) {
+        max-height: calc(100vh - #{$header-height} - #{$main-margin});
+      }
+
       display: flex;
       flex-direction: column;
       flex-grow: 1;

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

@@ -1,8 +1,7 @@
 <template>
   <div class="entities-selectors-container">
     <div class="selector">
-      <Dropdown title="Group by" icon-class="fas fa-layer-group"
+      <Dropdown title="Group by" icon-class="fas fa-eye" ref="groupingSelector">
-          :text="prettifyGroupingName(value.grouping)" ref="groupingSelector">
         <DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
           :item-class="{selected: value?.grouping === g}"
           @click="onGroupingChanged(g)" />
@@ -180,7 +179,7 @@ export default {
     display: inline-flex;
 
     &.active {
-      ::v-deep(.dropdown-container) {
+      :deep(.dropdown-container) {
         button {
           color: $default-hover-fg;
         }
@@ -188,7 +187,13 @@ export default {
     }
   }
 
-  ::v-deep(.dropdown-container) {
+  @media (max-width: 330px) {
+    .search-bar {
+      display: none;
+    }
+  }
+
+  :deep(.dropdown-container) {
     height: 100%;
     display: flex;
 
@@ -208,6 +213,10 @@ export default {
       border: 0;
       box-shadow: none;
 
+      .col-1.icon {
+        width: 1.5em;
+      }
+
       &.selected {
         font-weight: bold;
         background: #ffffff00;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="switch">
+  <div class="switch-container">
     <div class="col-10 label">
       <div class="name" v-text="value.name" />
     </div>
@@ -52,4 +52,10 @@ export default {
 
 <style lang="scss" scoped>
 @import "vars";
+
+.switch-container {
+  .switch {
+    direction: rtl;
+  }
+}
 </style>