fix: Mobile View of /blog /managed
continuous-integration/drone/push Build is passing

Additional fixes for narrow screens.
This time: both /blog and /managed had issues with horizontal overflow.
The content was being displayed as wider-than-the-screen,
 and phone users had to pinch the phone to zoom out to see everything.
Now, everything renders within the original width of the screen.

1. Locked the maximum content width to 100% of viewport width.
   This prevents the entries in /blog from being cropped on phone
   screens.
2. Allowed wordbreaks to fix one entry in /blog (which contains the long
   phrase: `$geographic_location_appropriate_temperature`)
3. As a final backup, added a horizontal scroll to any page content which
   cannot be made narrower. This fixes the table in /managed, allowing
   phone users to scroll left/right to see contact details.

NB: I think the table in /managed might look nicer, and wrap better,
    as something other than a table. But I don't have a better idea yet.
NB2: This commit breaks the workaround for phones earlier, of zooming
out to see the whole table.
This commit is contained in:
Amras
2026-11-02 16:49:33 +01:00
parent ff35ab0864
commit 995b6d04ff
@@ -199,6 +199,7 @@ footer .separator {
.blog-archive {
padding: 3rem 3rem;
@media (max-width: 450px) { padding: 3rem 1rem; }
max-width: 100vw;
.blog-listing {
display: grid;
@@ -222,14 +223,22 @@ footer .separator {
font-weight: 300;
font-size: 1.5rem;
margin-bottom: 1.5rem;
word-break: break-all;
}
}
}
}
.content {
overflow-x: scroll !important;
}
.blog-post {
padding: 4rem 6rem;
@media (max-width: 450px) { padding: 2.5rem 1.4rem 1rem; }
max-width: 100vw;
figure {
img.hero {