Skip to content

#308: Improvements for rendering on mobile phones - #354

Merged
akrherz merged 6 commits into
igniterealtime:mainfrom
guusdk:308_mobile-improvement
Jul 30, 2026
Merged

#308: Improvements for rendering on mobile phones#354
akrherz merged 6 commits into
igniterealtime:mainfrom
guusdk:308_mobile-improvement

Conversation

@guusdk

@guusdk guusdk commented Jul 30, 2026

Copy link
Copy Markdown
Member

Various improvements (see individual commits) that should improve the rendering of the website on devices with a smaller viewport.

guusdk added 6 commits July 30, 2026 16:50
The default `viewport` tag was missing `initial-scale=1`. Without it, many mobile browsers ignore the device width on first paint and render at a zoomed-out desktop scale. This should be a one-line, zero-risk fix.

Helps fix igniterealtime#308
This stacks the sidebar under the main content instead of forcing a 960px+ two-column layout.

Helps fix igniterealtime#308
The `download-box-*.jspf` files use HTML `<table>` layouts. These won't reflow with the CSS used in this project.

Wrapping them for horizontal scroll is the cheap containment fix so they don't blow out the whole page width.

Helps fix igniterealtime#308
Revisit the fix for igniterealtime#307

Move the nav row-to-dropdown transition and the content column collapse to a shared 768px breakpoint, and switch the nav list to flex-wrap so items degrade to a wrapped row instead of overflowing transparently.

Also replaces the range-syntax media queries (width >= / width <) with min-width/max-width for broader browser support.
This should prevent the sidebar to cling to the right while leaving visible white gap to the right of the main content.

As part of this, load stylesheets via `<link>` instead of `@import` in `<style>`. Firefox failed to fully apply rules from `@import`-ed stylesheets, breaking the sidebar flex layout; `<link>` tags parse reliably and also allow parallel CSS downloads.

Also switches `interior.css` to an absolute context path so it resolves correctly regardless of URL depth.

Helps fix igniterealtime#308
Move responsive sidebar layout into global styles so shared pages avoid full-width stacked sidebars below 768px

fixes igniterealtime#308
@akrherz
akrherz merged commit 5bd1267 into igniterealtime:main Jul 30, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants