related tags: fix tag toggling UX.

* Use -webkit-text-stroke instead of bold to indicate selected tags.
  Bold causes the tag to change width, which is jarring and can cause
  the tag to wrap around to a new line. -webkit-text-stroke doesn't
  change the tag's width. Despite the name, this property is widely
  supported.

* Don't wrap the checkbox in a label. In combination with flexbox, this
  made the hitbox for the tag too big. You could click on empty space
  outside the tag and it would still toggle the tag.

app/components/tag_list_component/tag_list_component.html+simple.erb

@@ -1,10 +1,8 @@
 <ul class="tag-list simple-tag-list">
   <% tags.each do |t| %>
-    <li>
+    <li class="flex items-center space-x-1">
-      <label class="flex items-center space-x-1">
+      <input type="checkbox" tabindex="-1">
-        <input type="checkbox" tabindex="-1">
+      <%= link_to t.pretty_name, posts_path(tags: t.name), class: "search-tag tag-type-#{t.category}", "data-tag-name": t.name %>
-        <%= link_to t.pretty_name, posts_path(tags: t.name), class: "search-tag tag-type-#{t.category}", "data-tag-name": t.name %>
-      </label>
     </li>
   <% end %>
 </ul>

app/javascript/src/styles/specific/related_tags.scss

@@ -21,7 +21,10 @@ div.related-tags {
   }
 
   li.selected a {
-    font-weight: bold;
+    /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke */
+    /* https://caniuse.com/text-stroke */
+    -webkit-text-stroke: 0.5px;
+    text-stroke: 0.5px;
   }
 
   li.selected, li:hover {