viewer: fix sort order button hitbox (#272)

* viewer: fix sort order button hitbox

github: resolves #266

* viewer: fix sort order button hover color

That was a conflict between the <a> tag's color and the .link color.
I enforced .link priority over <a>

* viewer: fix sort order button hover color

TODO comment about Buefy issues

3 files changed, 9 insertions, 4 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index c82e1bc..06d975f 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -80,7 +80,7 @@ button svg + span {
   color: $link;
   cursor: pointer;
   text-decoration: none;
-  &:hover {
+  &:hover, &:hover a {
     color: $link-hover;
   }
 }
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 2578055..5ba8266 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -78,7 +78,7 @@ export default class LdCommand extends Vue {
   align-items: center;
   flex: 0 0 $layout-left;
 
-  > a {
+  > * {
     // normalise icon active boxes
     width: $layout-top;
     line-height: $layout-top;
diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue
index cfaa5c1..4c246e6 100644
--- a/viewer/src/components/LdCommandSort.vue
+++ b/viewer/src/components/LdCommandSort.vue
@@ -19,8 +19,9 @@
 -->
 
 <template>
-  <b-dropdown v-model="selectedSort" :mobile-modal="false" append-to-body>
-    <a slot="trigger" class="link">
+  <!-- TODO: Find an alternative to this Buefy component; it causes focus and CSS issues -->
+  <b-dropdown v-model="selectedSort" :mobile-modal="false" append-to-body class="link" :class="$style.sortBtn">
+    <a slot="trigger">
       <fa-icon icon="sort-amount-down" size="lg" />
     </a>
     <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="sort">
@@ -52,4 +53,8 @@ export default class LdCommandSort extends Vue {
 .dropdownLabel {
   margin-left: 0.5em;
 }
+.sortBtn > div[role="button"] {
+  width: 100%;
+  height: 100%;
+}
 </style>