From 62054e83cc97cdfefd44e0c5cb69465a8a20c59c Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 10 Dec 2023 15:32:42 +0100
Subject: [PATCH] Remaining entity modal style rules moved from `Entities` to
 `EntityModal`.

---
 .../src/components/panels/Entities/Index.vue  | 34 -----------
 .../src/components/panels/Entities/Modal.vue  | 60 +++++++++++++++----
 2 files changed, 47 insertions(+), 47 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 d5faabd21..da23c15b5 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -610,40 +610,6 @@ export default {
     }
   }
 
-  :deep(.modal) {
-    @include until(#{$tablet - 1}) {
-      width: calc(100% - 1em);
-
-      .table-row {
-        border-bottom: 1px solid $border-color-2;
-      }
-    }
-
-    .table-row {
-      .value {
-        overflow: auto;
-      }
-    }
-
-    .content {
-      @include until($tablet) {
-        width: 100%;
-      }
-
-      @include from($tablet) {
-        min-width: 30em;
-      }
-
-      .body {
-        padding: 0;
-
-        .table-row {
-          padding: 0.5em;
-        }
-      }
-    }
-  }
-
   :deep(.dropdown-container) {
     .dropdown {
       min-width: 10em;
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
index 3d6496d28..fd704d693 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue
@@ -366,16 +366,56 @@ export default {
 @import "common";
 
 :deep(.modal) {
-  .body {
-    padding: 0;
+  @include until($tablet) {
+    width: 100%;
+  }
 
-    @include from($desktop) {
-      min-width: 45em;
+  .table-row {
+    display: flex;
+    align-items: center;
+    box-shadow: none;
+    padding: 0.5em;
+    border-bottom: 1px solid $border-color-2;
+
+    &:hover {
+      background: $hover-bg;
     }
 
-    .table-row {
-      box-shadow: none;
-      padding: 0.5em;
+    .title {
+      font-weight: bold;
+
+      @include from($tablet) {
+        width: 50%;
+        display: inline-block;
+      }
+    }
+
+    .value {
+      overflow: auto;
+
+      @include from($tablet) {
+        width: 50%;
+        display: inline-block;
+        text-align: right;
+      }
+    }
+  }
+
+  .content {
+    @include until($tablet) {
+      width: calc(100% - 1em) !important;
+    }
+
+    @include from($tablet) {
+      min-width: 30em;
+    }
+
+    .body {
+      padding: 0;
+
+      @include from($desktop) {
+        min-width: 45em;
+      }
     }
   }
 
@@ -442,12 +482,6 @@ export default {
     }
   }
 
-  .config-container {
-    .title {
-      @include section-title;
-    }
-  }
-
   .extra-info-container {
     .value {
       white-space: pre-wrap;