Skip to content

Fix mobile layout: header and footer now stretch fully #472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
benadida wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Fix mobile layout: header and footer now stretch fully #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a42bf4c
Fix mobile layout: header and footer now stretch fully
claude Jan 18, 2026
e682934
Improve mobile layout: prevent horizontal page scroll
claude Jan 18, 2026
ae0f0d2
Fix mobile layout: make table scroll instead of entire page
claude Jan 18, 2026
511e1a4
Fix mobile layout with viewport units and flexbox tables
claude Jan 18, 2026
a9f2c9e
Fix mobile layout: remove borders and use proper table display
claude Jan 18, 2026
96a4b76
Simplify mobile CSS: remove complex positioning and use auto width
claude Feb 8, 2026
0473689
Fix mobile layout: use sticky header/footer with scrollable content
claude Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions helios/media/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,40 @@ table.pretty th, td {
padding: 0.3em;
}

/* Mobile responsive styles */
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}

#content {
position: relative;
width: 100%;
margin-left: 0;
padding: 10px 15px;
box-sizing: border-box;
border-left: none;
border-right: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

#header, #footer {
position: sticky;
left: 0;
width: 100%;
background: #eee;
}

/* Keep table as normal table, let content scroll */
table.pretty {
width: auto;
min-width: 100%;
}

table.pretty th,
table.pretty td {
white-space: nowrap;
}
}

1 change: 1 addition & 0 deletions helios/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
xml:lang="{% firstof LANGUAGE_CODE 'en' %}"
lang="{% firstof LANGUAGE_CODE 'en' %}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %} - Helios</title>
{% block css %}
<!--
Expand Down
26 changes: 26 additions & 0 deletions helios_auth/media/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,30 @@ body {

#election_info {
font-size: 16pt;
}

/* Mobile responsive styles */
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}

#content {
position: relative;
width: 100%;
margin-left: 0;
padding: 10px 15px;
box-sizing: border-box;
border-left: none;
border-right: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

#header, #footer {
position: sticky;
left: 0;
width: 100%;
background: #eee;
}
}
1 change: 1 addition & 0 deletions helios_auth/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
xml:lang="{% firstof LANGUAGE_CODE 'en' %}"
lang="{% firstof LANGUAGE_CODE 'en' %}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Authentication{% endblock %} - Helios</title>
{% block css %}
<!--
Expand Down