Wrap tables in tbody

core/templates/ui/insights/channels.html

@@ -3,26 +3,28 @@
 <div id="channels">
   <div class="content" style="max-height: 30em; overflow: auto;">
     <table class="table is-fullwidth is-hoverable">
-      {% for chan in chans %}
-        <tr>
-          <td>
-            <span
-              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-              hx-post="{% url 'modal_drilldown' %}"
-              hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
-              hx-target="#modals-here" 
-              hx-trigger="click"
-              class="button is-small">
-              {{ chan }}
-            </span>
-            {% if chan in num_users %}
-              <span class="tag">
-                {{ num_users|index:chan }}
+      <tbody>
+        {% for chan in chans %}
+          <tr>
+            <td>
+              <span
+                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                hx-post="{% url 'modal_drilldown' %}"
+                hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
+                hx-target="#modals-here" 
+                hx-trigger="click"
+                class="button is-small">
+                {{ chan }}
               </span>
-            {% endif %}
-          </td>
-        </tr>
-      {% endfor %}
+              {% if chan in num_users %}
+                <span class="tag">
+                  {{ num_users|index:chan }}
+                </span>
+              {% endif %}
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
     </table>
   </div>
 </div>

core/templates/ui/insights/nicks.html

@@ -11,42 +11,44 @@
 <div id="nicks">
   <div class="content" style="max-height: 30em; overflow: auto;">
     <table class="table is-fullwidth is-hoverable">
-      {% for nick in nicks %}
-        <tr>
-          <td>
-            {% if nick in online %}
-              {% if online|index:nick is True %}
-                <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
-                  <i class="fa-solid fa-circle"></i>
-                </span>
-              {% elif online|index:nick is False %}
-                <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
-                  <i class="fa-solid fa-circle"></i>
-                </span>
-              {% else %}
-                <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
-                  <i class="fa-solid fa-circle"></i>
-                </span>
+      <tbody>
+        {% for nick in nicks %}
+          <tr>
+            <td>
+              {% if nick in online %}
+                {% if online|index:nick is True %}
+                  <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
+                    <i class="fa-solid fa-circle"></i>
+                  </span>
+                {% elif online|index:nick is False %}
+                  <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
+                    <i class="fa-solid fa-circle"></i>
+                  </span>
+                {% else %}
+                  <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
+                    <i class="fa-solid fa-circle"></i>
+                  </span>
+                {% endif %}
               {% endif %}
-            {% endif %}
-            <span
-              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-              hx-post="{% url 'modal_drilldown' %}"
-              hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
-              hx-target="#modals-here"
-              hx-trigger="click"
-              class="button is-small">
-              {{ nick }}
-            </span>
-            <a
-              class="icon has-text-info has-tooltip-info"
-              data-tooltip="Populate search"
-              onclick="document.getElementById('query').value='nick: {{ nick }}';">
-              <i class="fa-solid fa-arrow-left-long-to-line"></i>
-            </a>
-          </td>
-        </tr>
-      {% endfor %}
+              <span
+                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                hx-post="{% url 'modal_drilldown' %}"
+                hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
+                hx-target="#modals-here"
+                hx-trigger="click"
+                class="button is-small">
+                {{ nick }}
+              </span>
+              <a
+                class="icon has-text-info has-tooltip-info"
+                data-tooltip="Populate search"
+                onclick="document.getElementById('query').value='nick: {{ nick }}';">
+                <i class="fa-solid fa-arrow-left-long-to-line"></i>
+              </a>
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
     </table>
   </div>
 </div>