make table work better on small screens

.pre-commit-config.yaml

@@ -6,11 +6,11 @@ repos:
 #     rev: 24.8.0
 #     hooks:
 #     -   id: black
-- repo: https://github.com/pycqa/isort
+# - repo: https://github.com/pycqa/isort
-  rev: 5.13.2
+#   rev: 5.13.2
-  hooks:
+#   hooks:
-    - id: isort
+#     - id: isort
-      name: isort (python)
+#       name: isort (python)
 - repo: https://github.com/Riverside-Healthcare/djLint
   rev: v1.34.0
   hooks:

common/components.py

@@ -68,8 +68,8 @@ def Popover(
     )
 
 
-def PopoverTruncated(input_string: str) -> str:
+def PopoverTruncated(input_string: str, length: int = 30, ellipsis: str = "…") -> str:
-    if (truncated := truncate(input_string)) != input_string:
+    if (truncated := truncate(input_string, length, ellipsis)) != input_string:
         return Popover(wrapped_content=truncated, popover_content=input_string)
     else:
         return input_string

common/utils.py

@@ -36,8 +36,8 @@ def safe_getattr(obj: object, attr_chain: str, default: Any | None = None) -> ob
 
 def truncate(input_string: str, length: int = 30, ellipsis: str = "…") -> str:
     return (
-        (f"{input_string[:length-len(ellipsis)]}{ellipsis}")
+        (f"{input_string[:length-len(ellipsis)].rstrip()}{ellipsis}")
-        if len(input_string) > 30
+        if len(input_string) > length
         else input_string
     )
 

games/static/base.css

@@ -3117,6 +3117,10 @@ textarea:disabled:is(.dark *) {
     flex-direction: row;
   }
 
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
   .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(2rem * var(--tw-space-x-reverse));
@@ -3260,3 +3264,13 @@ textarea:disabled:is(.dark *) {
 .\[\&_td\:last-child\]\:text-right td:last-child {
   text-align: right;
 }
+
+@media not all and (min-width: 640px) {
+  .\[\&_td\:not\(\:first-child\)\:not\(\:last-child\)\]\:max-sm\:hidden td:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .\[\&_th\:not\(\:first-child\)\:not\(\:last-child\)\]\:max-sm\:hidden th:not(:first-child):not(:last-child) {
+    display: none;
+  }
+}

games/templates/cotton/simple_table.html

@@ -7,20 +7,20 @@
                 {{ header_action }}
                 </c-table-header>
             {% endif %}
-            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 [&_th:not(:first-child):not(:last-child)]:max-sm:hidden">
                 <tr>
                     {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
                 </tr>
             </thead>
-            <tbody class="dark:divide-y">
+            <tbody class="dark:divide-y [&_td:not(:first-child):not(:last-child)]:max-sm:hidden">
                 {% for row in rows %}<c-table-row :data=row />{% endfor %}
             </tbody>
         </table>
     </div>
     {% if page_obj and elided_page_range %}
-        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg"
+        <nav class="flex items-center flex-col md:flex-row md:justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg"
              aria-label="Table navigation">
-            <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
+            <span class="text-sm text-center font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"><span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
             <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
                 <li>
                     {% if page_obj.has_previous %}