From 4dd1a052087716ba2429af9583a73c934561c923 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 23 Feb 2021 17:40:00 -0600
Subject: [PATCH] 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.
---
 .../tag_list_component/tag_list_component.html+simple.erb | 8 +++-----
 app/javascript/src/styles/specific/related_tags.scss      | 5 ++++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/components/tag_list_component/tag_list_component.html+simple.erb b/app/components/tag_list_component/tag_list_component.html+simple.erb
index d7c96c3d7..1754dbc79 100644
--- a/app/components/tag_list_component/tag_list_component.html+simple.erb
+++ b/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>
-      <label class="flex items-center space-x-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 %>
-      </label>
+    <li class="flex items-center space-x-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 %>
     </li>
   <% end %>
 </ul>
diff --git a/app/javascript/src/styles/specific/related_tags.scss b/app/javascript/src/styles/specific/related_tags.scss
index 2e1f62634..03930c453 100644
--- a/app/javascript/src/styles/specific/related_tags.scss
+++ b/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 {