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 @@ - - + + 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;