From 292ed2abff36174319617d6ab279d219036f60b8 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 25 Nov 2022 23:14:28 +0100
Subject: [PATCH] Better style for dropdown items.

- Larger icon div to prevent text overlapping with icons
- Support for `selected` class
---
 .../http/webapp/src/components/elements/DropdownItem.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
index 4698b704..1214ae7d 100644
--- a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
+++ b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="row item" :class="itemClass" @click="clicked">
-    <div class="col-1 icon" v-if="iconClass?.length || iconUrl?.length">
+    <div class="col-2 icon" v-if="iconClass?.length || iconUrl?.length">
       <Icon :class="iconClass" :url="iconUrl" />
     </div>
-    <div class="text" :class="{'col-11': iconClass != null}" v-text="text" />
+    <div class="text" :class="{'col-10': iconClass != null}" v-text="text" />
   </div>
 </template>
 
@@ -60,6 +60,10 @@ export default {
     background: $hover-bg;
   }
 
+  &.selected {
+    font-weight: bold;
+  }
+
   &.disabled {
     color: $dropdown-disabled-color;
     cursor: initial;
@@ -68,6 +72,7 @@ export default {
   .icon {
     display: inline-flex;
     align-items: center;
+    max-width: 2em;
   }
 
   ::v-deep(.icon-container) {