From a3839e637d1e22b62c253e7a881d0e11062e696a Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 1 May 2023 01:22:02 +0200
Subject: [PATCH] Set a max-width: 600px for group containers.

---
 .../src/components/panels/Entities/Index.vue    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
index 152c85b17..f1ac4aaf0 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -464,6 +464,10 @@ export default {
           background: transparent;
           border: 0;
 
+          @include until($tablet) {
+            padding-right: 0;
+          }
+
           &:hover {
             color: $default-hover-fg;
           }
@@ -480,13 +484,15 @@ export default {
     width: 100%;
     height: calc(100% - #{$selector-height});
     overflow: auto;
-
-    @include until($tablet) {
-      padding: 0.5em;
-    }
   }
 
   .groups-container {
+    @include until(#{$desktop - 1}) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
     @include from($desktop) {
       column-count: var(--groups-per-row);
     }
@@ -494,13 +500,14 @@ export default {
 
   .group {
     width: 100%;
+    max-width: 600px;
     max-height: 100%;
     position: relative;
     padding: $main-margin 0;
     display: flex;
     break-inside: avoid;
 
-    @include from ($tablet) {
+    @include from($tablet) {
       padding: $main-margin;
     }