From 22d30e7a0779f006f9ae51e950b4b78d32751bc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Sat, 22 Jan 2022 16:30:51 +0100
Subject: [PATCH] MOBILE-3881 timeline: Wrap overdue status

---
 .../components/events/addon-block-timeline-events.html | 10 ++++++----
 .../block/timeline/components/events/events.scss       |  9 +++++++++
 src/core/components/mod-icon/mod-icon.scss             |  2 ++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 0823714d6..7fffc2bd2 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -26,10 +26,12 @@
                                 </core-mod-icon>
                             </ion-col>
                             <ion-col class="addon-block-timeline-activity-name ion-no-padding">
-                                <p class="item-heading">
-                                    <core-format-text [text]="event.activityname || event.name" contextLevel="module"
-                                        [contextInstanceId]="event.id" [courseId]="event.course && event.course.id">
-                                    </core-format-text>
+                                <p class="item-heading addon-block-timeline-activity-name-with-status">
+                                    <span>
+                                        <core-format-text [text]="event.activityname || event.name" contextLevel="module"
+                                            [contextInstanceId]="event.id" [courseId]="event.course && event.course.id">
+                                        </core-format-text>
+                                    </span>
                                     <ion-badge *ngIf="event.overdue" color="danger">{{ 'addon.block_timeline.overdue' | translate }}
                                     </ion-badge>
                                 </p>
diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss
index 5c4aad112..48a4663f7 100644
--- a/src/addons/block/timeline/components/events/events.scss
+++ b/src/addons/block/timeline/components/events/events.scss
@@ -31,6 +31,15 @@ h4.core-bold {
     justify-content: flex-end;
 }
 
+.addon-block-timeline-activity-name-with-status {
+    display: flex;
+    flex-wrap: wrap;
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
 .addon-block-timeline-activity-course-activity {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss
index 7cac89699..23ae48ea3 100644
--- a/src/core/components/mod-icon/mod-icon.scss
+++ b/src/core/components/mod-icon/mod-icon.scss
@@ -31,6 +31,8 @@ img {
     height: var(--size);
     max-width: var(--size);
     max-height: var(--size);
+    min-width: var(--size);
+    min-height: var(--size);
     vertical-align: top;
 
     &[alt] {