From a42bf4c1b6f9cde86bb55bb41b9ea232a9cf35be Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 18 Jan 2026 18:34:40 +0000 Subject: [PATCH 1/7] Fix mobile layout: header and footer now stretch fully Added viewport meta tag and responsive CSS media queries to fix the issue where header and footer bars don't stretch to full width on mobile devices when displaying data-heavy pages like the voter table. Changes: - Added viewport meta tag to helios and helios_auth base templates - Added responsive CSS for screens <= 768px width - On mobile: content and footer use 100% width, removed fixed positioning - Tables now scroll horizontally on mobile when content is too wide Fixes header/footer layout issue on mobile devices. --- helios/media/main.css | 30 ++++++++++++++++++++++++++++++ helios/templates/base.html | 1 + helios_auth/media/main.css | 16 ++++++++++++++++ helios_auth/templates/base.html | 1 + 4 files changed, 48 insertions(+) diff --git a/helios/media/main.css b/helios/media/main.css index 43f4dd73d..b59117c47 100644 --- a/helios/media/main.css +++ b/helios/media/main.css @@ -66,3 +66,33 @@ table.pretty th, td { padding: 0.3em; } +/* Mobile responsive styles */ +@media screen and (max-width: 768px) { + #content { + position: relative; + width: 100%; + margin-left: 0; + padding: 10px 15px; + box-sizing: border-box; + } + + #footer { + width: 100%; + box-sizing: border-box; + } + + table.pretty { + width: 100%; + margin: 1em 0; + font-size: 0.9em; + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + table.pretty th, table.pretty td { + padding: 0.2em; + white-space: nowrap; + } +} + diff --git a/helios/templates/base.html b/helios/templates/base.html index 075739f40..247ca7d53 100644 --- a/helios/templates/base.html +++ b/helios/templates/base.html @@ -7,6 +7,7 @@ xml:lang="{% firstof LANGUAGE_CODE 'en' %}" lang="{% firstof LANGUAGE_CODE 'en' %}"> + {% block title %}{% endblock %} - Helios {% block css %}