Fixed Skill Layout (#12776)

* Fixed Skill Layout

* Fixed skill layout reponsiveness

* Fixed collapsing of drawer container

* Fixed skill card disabled state, extra white border and hover sstate

* Fixed task / member selection style

* Fixed few changes

* Fixed extra padding and box shadow

* Fixed box shadow and added popover component

* Fixed disabled state issue

* Fixed styles and skill card issues

* Fixed style issues

* Fixed style issue

* Fixed lint error

* Fixed space between drawer class

* Fixed border issue

* Fixed round border issue

* Fixed Mage issue

* auto eslint fixes

* use translated string and computed property, reorganize css

* perf: reduce calculated classes, throttle mouse moved event

Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

website/client/src/components/groups/membersModal.vue

@@ -43,23 +43,32 @@
             >
           </div>
           <div class="col">
-            <select-list :items="sortOptions"
-                         @select="changeSortOption($event)"
-                         :value="optionEntryBySelectedValue"
-                         key-prop="value">
+            <select-list
+              :items="sortOptions"
+              :value="optionEntryBySelectedValue"
+              key-prop="value"
+              @select="changeSortOption($event)"
+            >
               <template v-slot:item="{ item }">
-                <span class="label" v-if="item">{{ item.text }}</span>
+                <span
+                  v-if="item"
+                  class="label"
+                >{{ item.text }}</span>
               </template>
             </select-list>
           </div>
           <div class="col-3">
-
-            <select-list :items="sortDirections"
-                         @select="changeSortDirection($event)"
-                         :value="directionEntryBySelectedValue"
-                         key-prop="value">
+            <select-list
+              :items="sortDirections"
+              :value="directionEntryBySelectedValue"
+              key-prop="value"
+              @select="changeSortDirection($event)"
+            >
               <template v-slot:item="{ item }">
-                <span class="label" v-if="item">{{ item.text }}</span>
+                <span
+                  v-if="item"
+                  class="label"
+                >{{ item.text }}</span>
               </template>
             </select-list>
           </div>