From 98d8ff6fb12f79e6ec03d953709ea90bc991fae9 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 23 May 2025 15:04:42 +0200
Subject: [PATCH] Fix flexbox issue with calendar description

---
 www/calendar/app-calendar.less | 19 ++++++++++++++++---
 www/calendar/inner.js          |  2 +-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less
index ce6aeae4c..e4b5b8ea2 100644
--- a/www/calendar/app-calendar.less
+++ b/www/calendar/app-calendar.less
@@ -182,12 +182,25 @@
                 display: flex;
                 margin-bottom: 0.3rem;
                 align-items: center;
-                .event-location,.event-description {
+                .event-location {
                     display: flex;
                     align-items: center;
                 }
-                .event-description p {
-                    margin:0.1rem;
+                .fa-align-justify {
+                    margin-top: 3px;
+                }
+                &.tui-full-calendar-popup-detail-item-separate {
+                    &>span {
+                        display: flex;
+                        width: 100%;
+                    }
+                    .event-description {
+                        display: block;
+                        line-height: 1.1em;
+                        p, ul {
+                            margin:0.1rem;
+                        }
+                    }
                 }
                 a {
                     margin:0.1rem;
diff --git a/www/calendar/inner.js b/www/calendar/inner.js
index 264f08956..2d9244208 100644
--- a/www/calendar/inner.js
+++ b/www/calendar/inner.js
@@ -417,7 +417,7 @@ define([
 
             let description_icon = h('i.fa.fa-align-justify.tui-full-calendar-icon', { 'aria-hidden': true }, []);
             let description = diffMk.render(str, true);
-            return `<div class="event-description">${description_icon.outerHTML} ${description}</div>`;
+            return `${description_icon.outerHTML}<div class="event-description">${description}</div>`;
         },
         popupIsAllDay: function() { return Messages.calendar_allDay; },
         titlePlaceholder: function() { return Messages.calendar_title; },