Fix tag double click

3 files changed, 11 insertions, 5 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 55e76ab7..8bbd5731 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -208,17 +208,21 @@ button.action-button {
 }
 
 .tag {
-    display: inline;
+    display: inline-block;
     padding: 0.2em 0.6em 0.3em;
     font-size: 75%;
     font-weight: 700;
-    line-height: 1;
+    line-height: 1.25;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
     border-radius: 0.25em;
 }
 
+.tag-inner {
+    display: block;
+}
+
 .tag-list>.tag+.tag {
     margin-left: 0.375em;
 }
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 62f3c69c..eda9abd9 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -75,7 +75,7 @@
 <template id="kanji-glossary-item-template"><li class="kanji-glossary-item"><span class="kanji-glossary"></span></li></template>
 <template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
 
-<template id="tag-template"><span class="tag"></span></template>
-<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></template>
+<template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
+<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></template>
 
 </body></html>
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index e1710488..8c39d380 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -252,8 +252,10 @@ class DisplayGenerator {
     createTag(details) {
         const node = DisplayGenerator._instantiateTemplate(this._tagTemplate);
 
+        const inner = node.querySelector('.tag-inner');
+
         node.title = details.notes;
-        node.textContent = details.name;
+        inner.textContent = details.name;
         node.dataset.category = details.category;
 
         return node;