From 876f2bb7ad154153ad1215fb73251e6a36ff0f97 Mon Sep 17 00:00:00 2001
From: "Max L." <privat@maxlissowski.de>
Date: Fri, 24 Nov 2023 12:45:28 +0100
Subject: [PATCH] Try to deal better with overflow

ALso align images right in carousel
---
 script.js  | 8 +++++++-
 styles.css | 3 +++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index 2efb796..f2722dd 100644
--- a/script.js
+++ b/script.js
@@ -185,6 +185,7 @@ const updateCarousel = function(slides, posts) {
         else {
             newHTML += `<div class="carousel-item" data-mdb-interval="${duration}" data-mdb-pause="false">`;
         }
+        const postContent = DOMPurify.sanitize(post.content);
         newHTML += `
             <div class="card-big">
                 <div class="d-flex align-items-center mb-4">
@@ -193,7 +194,7 @@ const updateCarousel = function(slides, posts) {
                 </div>
                 <hr>
                 <div class="row align-items-center vertical-align-center">
-                    ${post.media_attachments[0] ? `<div class="col-md-6"><div class="card-text">${DOMPurify.sanitize(post.content)}</div></div>` : `<div class="col-md-12"><div class="card-text">${DOMPurify.sanitize(post.content)}</div></div>`}
+                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 800 ? `style="font-size: 0.9em;"`: ``}>${postContent}</div></div>
                     ${post.media_attachments[0] ? `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''}
                 </div>
                 <hr>
@@ -228,6 +229,11 @@ const showCarousel = function() {
     $('#myCarousel').carousel("cycle");
 }
 
+const strip = function(html) {
+    let doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || "";
+}
+
 const hideCarousel = function() {
     // show popover
     document.getElementById('popover').style.opacity = '0';
diff --git a/styles.css b/styles.css
index dd40322..3291ebf 100644
--- a/styles.css
+++ b/styles.css
@@ -52,6 +52,8 @@
 
 .carousel .card-text {
     font-size: 1.4em;
+    overflow: hidden;
+    max-height: 60vh;
 }
 
 .card {
@@ -201,6 +203,7 @@ body {
     margin-top: 0px !important;
     margin-bottom: 10px !important;
     align-items: center;
+    float: right;
 }
 
 .text-muted {