[PATCH v1 5/6] contain horizontal overflow in core content and homepage releases layout

Rito Rhymes
2026-03-16T18:00:56Z

On narrow viewports, fixed-width content containers, homepage release
sections, and long preformatted strings can force page-wide horizontal
overflow.

Realign #protocols and #latest for narrow screens so they do not
overflow and can wrap down as needed to fit.

Make #releases scroll within its own container, and keep release-date
cells readable on mobile with nowrap and horizontal padding.

Allow preformatted blocks to scroll horizontally within their own
region instead of expanding page width and creating page-wide
horizontal scrolling.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
Assisted-by: claude-opus-4-6
---
korgi/static/css/main.css | 27 +++++++++++++++++++++++++++
1 file changed, 27 insertions(+)

diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index d20d8b6..16d97cd 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -360,6 +360,33 @@ dt {
#banner li {
padding: 0 0.5em;
}
+ #protocols {
+ margin: 1em 0;
+ width: auto;
+ }
+ #latest {
+ margin-right: 0;
+ }
+ #releases {
+ display: block;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+ #releases td:nth-child(3) {
+ white-space: nowrap;
+ padding: 0 0.75em;
+ }
+ #featured,
+ #content {
+ width: auto;
+ margin: 1em;
+ padding: 1em;
+ }
+ pre,
+ .literal-block {
+ white-space: pre;
+ overflow-x: auto;
+ }

#extras {
width: auto;
--
2.51.0