From 995b6d04ff13003085602946edaee5eac5d47100 Mon Sep 17 00:00:00 2001
From: Amras <amras@friendmaterial.lgbt>
Date: Mon, 2 Nov 2026 16:37:11 +0100
Subject: [PATCH] fix: Mobile View of /blog /managed

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.
---
 themes/coopcloud.tech/assets/scss/main.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/themes/coopcloud.tech/assets/scss/main.scss b/themes/coopcloud.tech/assets/scss/main.scss
index b8aaf1a..3b85ea6 100644
--- a/themes/coopcloud.tech/assets/scss/main.scss
+++ b/themes/coopcloud.tech/assets/scss/main.scss
@@ -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 {