feat: responsive grid with scrollable area and fixed hint column

- Add CSS variables (--cell, --cell-font, --trigger-h) for responsive cell sizing - Shrink grid cells at 600px and 420px breakpoints - Add .page-body wrapper with 16px horizontal padding to prevent edge collisions - Separate hint column from scrollable grid: hints rendered outside the table in a fixed flex column, only the letter grid scrolls horizontally Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-31 14:17:22 +02:00
parent 6cbebb6367
commit f6d180474a
4 changed files with 124 additions and 51 deletions
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -17,6 +17,8 @@
    </head>
    <body>
        {% include '_navbar.html.twig' %}
-        {% block body %}{% endblock %}
+        <div class="page-body">
+            {% block body %}{% endblock %}
+        </div>
    </body>
 </html>