From 873262bbaacaed51ad10c67deadd36ec7544b7fc Mon Sep 17 00:00:00 2001
From: Michael Hawkins <michaelh@moodle.com>
Date: Wed, 10 Nov 2021 14:26:24 +0800
Subject: [PATCH] MDL-72790 block_timeline: Ensure overdue badge visible at all
 widths

This ensures on narrower screens, the activity title still truncates
but the overdue pill always remains visible where present. There is no
visual change where an item is not overdue, or on wider screens where
there is room to display the full content.
---
 .../timeline/templates/event-list-item.mustache  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/blocks/timeline/templates/event-list-item.mustache b/blocks/timeline/templates/event-list-item.mustache
index bdbd961a82e..ad8d6cd39b2 100644
--- a/blocks/timeline/templates/event-list-item.mustache
+++ b/blocks/timeline/templates/event-list-item.mustache
@@ -56,13 +56,15 @@
                 {{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
             </div>
             <div class="event-name-container flex-grow-1 line-height-3 nowrap text-truncate">
-                <h6 class="event-name mb-0 pb-1 text-truncate">
-                    <a href="{{url}}"
-                            title="{{name}}"
-                            aria-label='{{#cleanstr}} ariaeventlistitem, block_timeline, { "name": {{#quote}}{{{activityname}}}{{/quote}}, "course": {{#quote}}{{{course.fullnamedisplay}}}{{/quote}}, "date": "{{#userdate}} {{timesort}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}" } {{/cleanstr}}'>
-                        {{{activityname}}}</a>
-                    {{#overdue}}<span class="badge badge-pill badge-danger ml-1">{{#str}} overdue, block_timeline {{/str}}</span>{{/overdue}}
-                </h6>
+                <div class="d-flex">
+                    <h6 class="event-name mb-0 pb-1 text-truncate">
+                        {{#overdue}}<span class="badge badge-pill badge-danger ml-1 float-right">{{#str}} overdue, block_timeline {{/str}}</span>{{/overdue}}
+                        <a href="{{url}}"
+                                title="{{name}}"
+                                aria-label='{{#cleanstr}} ariaeventlistitem, block_timeline, { "name": {{#quote}}{{{activityname}}}{{/quote}}, "course": {{#quote}}{{{course.fullnamedisplay}}}{{/quote}}, "date": "{{#userdate}} {{timesort}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}" } {{/cleanstr}}'>
+                            {{{activityname}}}</a>
+                    </h6>
+                </div>
                 <small class="mb-0">
                     {{#courseview}}
                         {{activitystr}}