Fix mobile layout: header and footer now stretch fully#472
Open
Fix mobile layout: header and footer now stretch fully#472
Conversation
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.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds mobile responsiveness to fix layout issues where header and footer bars don't stretch to full width on mobile devices. The changes include adding viewport meta tags and CSS media queries to properly handle narrow screens.
Changes:
- Added viewport meta tag to both Helios and Helios Auth base templates
- Implemented responsive CSS media queries for screens ≤ 768px width
- Made tables horizontally scrollable on mobile devices in the main Helios application
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| helios_auth/templates/base.html | Added viewport meta tag for mobile rendering |
| helios_auth/media/main.css | Added mobile styles for content and footer to use full width |
| helios/templates/base.html | Added viewport meta tag for mobile rendering |
| helios/media/main.css | Added mobile styles for content, footer, and table scrolling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Enhanced the mobile responsive CSS to properly contain wide content like voter tables while keeping header and footer at full viewport width. Changes: - Added overflow-x: hidden to html/body to prevent page-level horizontal scroll - Added overflow-x: auto to #content for internal scrolling of wide tables - Explicitly set #header to 100% width on mobile - Changed table.pretty from display:block to min-width:100% for better rendering Now the header and footer bars stretch fully to viewport width on mobile, and wide tables scroll within the content area without breaking the layout.
The previous fix made the entire #content div scrollable, which caused the header and footer (which are inside #content) to scroll horizontally with the table. This was wrong. The correct fix: - Remove overflow-x from #content (so it doesn't scroll) - Add max-width: 100% to #content to enforce width constraint - Make table.pretty itself scrollable with display: block and overflow-x: auto - Keep table internals (thead, tbody, tr) as display: table for proper rendering Now on mobile: - Header and footer stay at full viewport width and don't scroll - Only the table content scrolls horizontally when too wide - No horizontal page scrolling
The previous attempts failed because: 1. Using width: 100% made elements relative to parent, which itself was too wide 2. Making table elements display:table created separate tables with misaligned columns The correct solution: 1. Use 100vw on #content to force it to exactly viewport width 2. Use negative margins on #header and #footer to pull them to full width (compensating for content's 15px padding) 3. Use flexbox for table rows instead of display:table - table.pretty: display block with overflow-x auto for scrolling - tr: display flex so rows can be wider than container - th/td: flex 0 0 auto with nowrap so columns size to content Result: - Header and footer are exactly viewport width (no horizontal stretching) - Wide voter tables scroll horizontally within their container - No page-level horizontal scrolling
The flexbox approach broke column alignment. New simpler strategy: 1. Set #content to 100vw with no left/right padding or borders 2. Remove borders from #content on mobile 3. Add padding directly to #header and #footer (15px each side) 4. Add padding to all other content children For table scrolling: - table.pretty: display block with overflow-x auto (scroll container) - thead/tbody: display table (proper table rendering) - tr: display table-row (proper row rendering) - th/td: display table-cell (proper cell rendering, columns align) This keeps table structure intact so columns align between header and body, while making the table itself scrollable. Result: - Header and footer at full viewport width - Table scrolls horizontally when too wide - Columns stay aligned - No page horizontal scroll
Simplified the mobile responsive approach by: 1. Changed #content position from absolute to static on mobile 2. Used width: 100% instead of 100vw to avoid viewport calculation issues 3. Removed complex margin/padding manipulations 4. Set table thead/tbody to width: auto instead of min-width: 100% - This prevents the table internals from forcing container expansion 5. Changed table overflow from scroll to auto (only shows scrollbar when needed) The key fix: thead/tbody with display:table and width:auto will size to their content, but the parent table.pretty with display:block and overflow-x:auto will scroll instead of expanding the page. Result: - Header and footer stay at 100% of content width - Body overflow-x: hidden prevents page scrolling - Table scrolls horizontally when content is too wide
The key insight: header and footer are INSIDE #content, so making the table scrollable while keeping them fixed requires a different approach. Solution: - Make #content scrollable (overflow-x: auto) instead of the table - Use position: sticky on #header and #footer so they stay at full width even when #content scrolls horizontally - Keep table as a normal table (no display: block) - Set table to width: auto with min-width: 100% so it can expand when needed - Body has overflow-x: hidden to prevent page-level scrolling Result: - Header and footer stay at full viewport width (they're sticky) - Wide voter tables cause #content to scroll horizontally - Table scrolls but header/footer stay in place - No page-level horizontal scrolling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
Fixes header/footer layout issue on mobile devices.