extant2000/flamenet-relay
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the mobile rail and contain tables in the generated pages

Browse Source 
Three things a phone showed.

A table in a generated page had no wrapper to scroll inside, so /spec pushed
the document to 418px in a 375px viewport. Those templates are built from
docs and cannot be given a wrapper, so the table becomes a block with its own
scroll container and its rows still lay out as a table inside. The comparison
table keeps its .compare-scroll.

The rail put four open groups above the page once the columns stacked, which
is a screenful of navigation before any content. Developers, Project and
Legal are now details elements, open in the markup so a desktop and a browser
without JS get the full rail, closed by a matchMedia listener at the same
860px the stylesheet stacks at. The stylesheet already carried the
summary.lcol-hd rules for this.

Donate is back in the rail. It was in the top bar, the right rail and the
footer, but not in the sections list.

Measured at 375px across all 32 pages: none overflow. /spec was the only one
that did. Desktop is unchanged at 150/830/300 on one row with every group
open.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Paul Hitt
2026-09-12 12:00:47 -04:00
co-authored by Claude Opus 5
parent fb2ba4dd12
commit 0835fe834b
3 changed files with 43 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Public/landing.js
+18
View File
@@ -25,3 +25,21 @@
})
.catch(function () {});
})();
// The rail sections fold on a phone.
//
// They are open in the markup, so a desktop and a browser without JS get the
// full rail. Once the columns stack, four open groups put a screenful of
// navigation above the page, so everything below the product nav closes. The
// same 860px the stylesheet stacks at.
(function () {
var groups = document.querySelectorAll('.lcol-sec');
if (!groups.length || !window.matchMedia) return;
var stacked = window.matchMedia('(max-width: 860px)');
function apply() {
for (var i = 0; i < groups.length; i++) groups[i].open = !stacked.matches;
}
apply();
if (stacked.addEventListener) stacked.addEventListener('change', apply);
else if (stacked.addListener) stacked.addListener(apply);
})();
Public/portal.css
+12
View File
@@ -316,6 +316,18 @@ summary.lcol-hd::-webkit-details-marker { display: none; }
}
.doc th, .band th { background: #E8EFF8; font-weight: bold; }
/* A table in a generated page has no wrapper to scroll inside, and those
templates are built from docs so they cannot be given one. Making the table
a block gives it its own scroll container, and its rows still lay out as a
table inside. The comparison table already sits in .compare-scroll. */
.doc table:not(.compare), .band table:not(.compare) {
display: block;
width: max-content;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.doc hr { border: 0; border-top: 1px solid var(--fn-rule); margin: 12px 0; }
.doc blockquote {
Resources/Views/layout.leaf
+13 -6
View File
@@ -108,19 +108,23 @@
<li#if(section == "comparison"): class="active-tab"#endif><a href="/comparison">#(chrome.compare)</a></li>
<li><a href="/#("#")developers">#(chrome.developers)</a></li>
<li#if(section == "about"): class="active-tab"#endif><a href="/about">#(chrome.about)</a></li>
<li#if(section == "donate"): class="active-tab"#endif><a href="/donate">#(chrome.donate)</a></li>
</ul>
<div class="lcol-hd">#(chrome.footDevelopers)</div>
<ul class="lcol-list">
<details class="lcol-sec" open>
<summary class="lcol-hd">#(chrome.footDevelopers)</summary>
<ul class="lcol-list">
<li#if(section == "source"): class="active-tab"#endif><a href="/source">#(chrome.footSource)</a></li>
<li#if(section == "spec"): class="active-tab"#endif><a href="/spec">#(chrome.footSpec)</a></li>
<li#if(section == "security"): class="active-tab"#endif><a href="/security">#(chrome.footSecurity)</a></li>
<li#if(section == "audit"): class="active-tab"#endif><a href="/audit">#(chrome.footAudit)</a></li>
<li#if(section == "self-hosting"): class="active-tab"#endif><a href="/self-hosting">#(chrome.footSelfHost)</a></li>
</ul>
</details>
<div class="lcol-hd">#(chrome.footProject)</div>
<ul class="lcol-list">
<details class="lcol-sec" open>
<summary class="lcol-hd">#(chrome.footProject)</summary>
<ul class="lcol-list">
<li#if(section == "community"): class="active-tab"#endif><a href="/community">#(chrome.footCommunity)</a></li>
<li#if(section == "support"): class="active-tab"#endif><a href="/support">#(chrome.footSupport)</a></li>
<li#if(section == "safety"): class="active-tab"#endif><a href="/safety">#(chrome.footHelp)</a></li>
@@ -129,14 +133,17 @@
<li><a href="/releases">#(chrome.footNews)</a></li>
<li><a href="/status">#(chrome.footStatus)</a></li>
</ul>
</details>
<div class="lcol-hd">#(chrome.footLegal)</div>
<ul class="lcol-list">
<details class="lcol-sec" open>
<summary class="lcol-hd">#(chrome.footLegal)</summary>
<ul class="lcol-list">
<li#if(section == "terms"): class="active-tab"#endif><a href="/terms">#(chrome.footTerms)</a></li>
<li#if(section == "privacy"): class="active-tab"#endif><a href="/privacy">#(chrome.footPrivacy)</a></li>
<li#if(section == "metadata"): class="active-tab"#endif><a href="/metadata">#(chrome.footKeep)</a></li>
<li#if(section == "licenses"): class="active-tab"#endif><a href="/licenses">#(chrome.footLicences)</a></li>
</ul>
</details>
<p class="lcol-note">#(chrome.railNote)</p>
</div>