MOBILE-3881 timeline: Wrap overdue status

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">
+                                <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>

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;

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] {