fix(frontend): resolve table overflow on small screens

2024-09-06 15:58:51 +02:00 · 2024-09-06 15:58:51 +02:00 · f76ac1e8fe
commit f76ac1e8fe
parent 631b00db0b
1 changed files with 23 additions and 0 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -10,6 +10,29 @@
    />
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
    <script src="/static/index.js" defer></script>
+    <style>
+      @media (max-width: 1279px) {
+        table thead tr {
+          display: none;
+        }
+
+        table td {
+          display: block;
+        }
+
+        table tr {
+          counter-set: column;
+        }
+
+        table tr td {
+          counter-increment: column;
+        }
+
+        table td::before {
+          content: counter(column) " ora: ";
+        }
+      }
+    </style>
  </head>
  <body>
    <main class="container">