From cb9e004121c384bad26511fdf284eddaef785cef Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 24 Jun 2021 11:46:26 -0400
Subject: [PATCH] UX: Make bulk select checkbox easier to target (#13517)

Adds a label element around the checkbox, so that user can more easily
hit the element. Quite useful when checking many items in topic list.
---
 .../discourse/app/templates/list/topic-list-item.hbr      | 8 +++++---
 app/assets/stylesheets/desktop/topic-list.scss            | 7 ++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr b/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
index 03ea153bb09..e7964e1e32f 100644
--- a/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
+++ b/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
@@ -2,7 +2,9 @@
 
 {{#if bulkSelectEnabled}}
   <td class="bulk-select">
-    <input type="checkbox" class="bulk-select">
+    <label for="bulk-select-{{topic.id}}">
+      <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
+    </label>
   </td>
 {{/if}}
 
@@ -23,8 +25,8 @@
     {{~topic-featured-link topic}}
     {{~/if}}
     {{~raw-plugin-outlet name="topic-list-after-title"}}
-    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
-                                   topicId=topic.id 
+    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
+                                   topicId=topic.id
                                    unreadClass=unreadClass~}}
     {{~#if showTopicPostBadges}}
     {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 39f8f37fc98..592abf7e491 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -46,8 +46,13 @@
   }
 
   td.bulk-select {
-    padding: 10px;
+    padding: 0;
     width: 30px;
+    label {
+      margin: 0px;
+      padding: 12px 10px 16px 10px;
+      cursor: pointer;
+    }
     + .main-link {
       padding-left: 0;
     }