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

2 files changed, 8 insertions, 3 deletions

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>