make sure titles are truncated

games/static/base.css

@@ -2249,6 +2249,10 @@ input:checked + .toggle-bg {
   max-width: 20ch;
 }
 
+.min-w-30char {
+  min-width: 30ch;
+}
+
 .max-w-30char {
   max-width: 30ch;
 }

games/templates/components/table_row.html

@@ -1,9 +1,16 @@
 {% fragment as default_content %}
+{% load randomid %}
 {% for td in data %}
     {% if forloop.first %}
         <th scope="row"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white min-w-30-char max-w-30char text-ellipsis overflow-hidden">
+            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white min-w-30char">
-            <span title="{{ td }}">{{ td }}</span>
+            {% randomid td as th_popover_id %}
+            <span data-popover-target="{{ th_popover_id }}">{{ td|truncatechars:30 }}</span>
+            {% if td|length > 30 %}
+                {% #popover id=th_popover_id %}
+                {{ td }}
+                {% /popover %}
+            {% endif %}
         </th>
     {% else %}
         {% #table_td %}

games/templatetags/randomid.py

@@ -0,0 +1,11 @@
+import random
+import string
+
+from django import template
+
+register = template.Library()
+
+
+@register.simple_tag
+def randomid(seed: str = "") -> str:
+    return str(hash(seed + "".join(random.choices(string.ascii_lowercase, k=10))))