From fdc1a1a215b5f031730774e831be04ab96dde7d9 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Sun, 3 May 2026 06:15:55 -0300
Subject: [PATCH] content: article modal now scrolls horizontally with
 newspaper columns

---
 index.html | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index fa4414c..86608b8 100644
--- a/index.html
+++ b/index.html
@@ -1870,8 +1870,8 @@
             #article-box {
                 position: relative;
                 width: 100%;
-                max-width: 720px;
-                max-height: 88vh;
+                max-width: 92vw;
+                height: 82vh;
                 display: flex;
                 flex-direction: column;
                 background: #fdf6ee;
@@ -1924,18 +1924,22 @@
 
             #article-box .article-body {
                 padding: 28px 40px 40px;
-                overflow-y: auto;
+                overflow-x: auto;
+                overflow-y: hidden;
                 flex: 1;
                 min-height: 0;
                 font-family: Georgia, "Times New Roman", serif;
                 font-size: 1.05rem;
                 line-height: 1.85;
                 color: #4e342e;
-                column-count: 1;
+                column-width: 340px;
+                column-gap: 36px;
+                column-rule: 1px solid rgba(93, 64, 55, 0.12);
+                column-fill: auto;
             }
 
             #article-box .article-body::-webkit-scrollbar {
-                width: 8px;
+                height: 8px;
             }
 
             #article-box .article-body::-webkit-scrollbar-track {
@@ -1974,6 +1978,7 @@
                 margin-bottom: 16px;
                 text-align: justify;
                 hyphens: auto;
+                break-inside: avoid;
             }
 
             #article-box .article-body ul {
@@ -2006,13 +2011,14 @@
             }
 
             #article-box .article-body iframe {
-                width: 100%;
+                width: 340px;
                 max-width: 100%;
                 height: auto;
                 aspect-ratio: 16 / 9;
                 border-radius: 6px;
                 margin: 20px 0;
                 border: 1px solid rgba(93, 64, 55, 0.12);
+                break-inside: avoid;
             }
 
             #article-close {
@@ -2041,7 +2047,8 @@
 
             @media (max-width: 860px) {
                 #article-box {
-                    max-height: 92vh;
+                    height: 90vh;
+                    max-width: 96vw;
                     border-radius: 4px;
                 }
                 #article-box .article-header {
@@ -2053,6 +2060,7 @@
                 #article-box .article-body {
                     padding: 20px 20px 28px;
                     font-size: 0.95rem;
+                    column-width: 280px;
                 }
             }