smaller clickable area - nicer experience

lectures/templates/lectures/view_group_lectures.html

@@ -50,15 +50,21 @@
                             {% for category in lecture_categories %}
                                 <div
                                     class="
-                                        flex flex-col gap-3 group justify-center p-4 cursor-pointer
-
-                                        hover:bg-gray-100
+                                        flex flex-col gap-3 group justify-center
 
                                         __lecture-category
                                     "
                                     data-is-open="false"
                                 >
-                                    <div class="flex justify-between items-center">
+                                    <div
+                                        class="
+                                            flex justify-between items-center cursor-pointer p-4
+
+                                            __lecture-category-clickable
+
+                                            hover:bg-gray-100
+                                        "
+                                    >
                                         <h2 class="text-3xl font-alt">{{ category.grouper }}</h2>
 
                                         <div>

static_src/view_group_lectures.js

@@ -19,6 +19,13 @@ const assignOpenerListeners = () => {
     $(".__lecture-category").on(
         "click",
         event => {
+            if (
+                !$(event.target).hasClass("__lecture-category-clickable")
+                && !(event.target).closest(".__lecture-category-clickable").length === 0
+            ) {
+                return
+            }
+
             if (event.currentTarget.dataset.isOpen === 'true') {
                 $(event.currentTarget).
                 find(".__lecture-category-opener").