From 00410933e61a8a4bd88e5be8f274eb766161668f Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 30 Nov 2022 10:44:19 +0100
Subject: [PATCH] Client - improve language dropdown display

---
 .../src/components/Common/Dropdown.vue            | 14 +++++++-------
 fittrackee_client/src/components/NavBar.vue       | 15 ++++++++-------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/fittrackee_client/src/components/Common/Dropdown.vue b/fittrackee_client/src/components/Common/Dropdown.vue
index 7e4e79f4..e18f2b44 100644
--- a/fittrackee_client/src/components/Common/Dropdown.vue
+++ b/fittrackee_client/src/components/Common/Dropdown.vue
@@ -54,7 +54,7 @@
   .dropdown-list {
     list-style-type: none;
     background-color: #ffffff;
-    padding: 0;
+    padding: 0 !important;
     margin-top: 5px;
     margin-left: -20px !important;
     position: absolute;
@@ -64,16 +64,12 @@
     width: auto !important;
 
     li {
-      padding-top: 5px;
-      padding-right: 5px;
-    }
-    li:last-child {
-      padding-bottom: 5px;
+      padding: 3px 8px;
     }
   }
 
   .dropdown-item {
-    cursor: default;
+    cursor: pointer;
 
     &.selected {
       font-weight: bold;
@@ -82,5 +78,9 @@
     &.selected::after {
       content: ' ✔';
     }
+
+    &:hover {
+      background-color: var(--dropdown-hover-color);
+    }
   }
 </style>
diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index b1880a7c..ea85e463 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -197,14 +197,10 @@
       .nav-item {
         padding: 0 10px;
 
-        &.dropdown-wrapper {
-          width: 60px;
-        }
-
         ::v-deep(.dropdown-list) {
-          margin-left: -10px;
-          padding-left: 10px;
-          width: 75px;
+          padding-left: $default-padding;
+          padding-right: $default-padding;
+          right: $default-padding;
         }
       }
 
@@ -294,6 +290,11 @@
 
         .nav-item {
           padding: 7px 25px;
+
+          ::v-deep(.dropdown-list) {
+            right: initial;
+            left: 45px;
+          }
         }
 
         .nav-profile-img {