diff --git a/blocks/timeline/styles.css b/blocks/timeline/styles.css
index 23ebfb11fd9..dcebebd5c83 100644
--- a/blocks/timeline/styles.css
+++ b/blocks/timeline/styles.css
@@ -7,3 +7,17 @@
 #block-region-side-pre .block_timeline h6.event-action a.btn {
     width: auto;
 }
+
+.block_timeline .timeline-action-button {
+    margin-left: auto;
+}
+
+@media (max-width: 480px) {
+    .block_timeline .timeline-name {
+        width: 100%;
+    }
+
+    .block_timeline .timeline-action-button {
+        margin-left: 0;
+    }
+}
diff --git a/blocks/timeline/templates/event-list-item.mustache b/blocks/timeline/templates/event-list-item.mustache
index 2e169bdd455..bdbd961a82e 100644
--- a/blocks/timeline/templates/event-list-item.mustache
+++ b/blocks/timeline/templates/event-list-item.mustache
@@ -47,42 +47,46 @@
 }}
 <div class="list-group-item timeline-event-list-item flex-column pt-2 pb-0 border-0 {{#courseview}}px-0{{/courseview}}{{^courseview}}px-2{{/courseview}}"
         data-region="event-list-item">
-    <div class="d-flex justify-content-between flex-wrap pb-1">
-        <small class="text-right text-nowrap align-self-center ml-1">
-            {{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
-        </small>
-        <div class="icon-size-4 align-self-top align-self-center mx-2">
-            {{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
-        </div>
-        <div class="event-name-container flex-grow-1 text-truncate line-height-3">
-            <h6 class="event-name text-truncate mb-0">
-                <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>
-            <small class="text-truncate mb-0">
-                {{#courseview}}
-                    {{activitystr}}
-                {{/courseview}}
-                {{^courseview}}
-                    {{#course.fullnamedisplay}}{{{course.fullnamedisplay}}} &middot; {{/course.fullnamedisplay}}{{activitystr}}
-                {{/courseview}}
+    <div class="d-flex flex-wrap pb-1">
+        <div class="d-flex mr-auto pb-1 mw-100 timeline-name">
+            <small class="text-right text-nowrap align-self-center ml-1">
+                {{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
             </small>
+            <div class="icon-size-4 align-self-top align-self-center mx-2 text-nowrap">
+                {{#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>
+                <small class="mb-0">
+                    {{#courseview}}
+                        {{activitystr}}
+                    {{/courseview}}
+                    {{^courseview}}
+                        {{#course.fullnamedisplay}}{{{course.fullnamedisplay}}} &middot; {{/course.fullnamedisplay}}{{activitystr}}
+                    {{/courseview}}
+                </small>
+            </div>
         </div>
         {{#action.actionable}}
-        <h6 class="event-action">
-            <a class="list-group-item-action btn btn-outline-secondary btn-sm text-nowrap"
-                   href="{{action.url}}"
-                   aria-label="{{action.name}}"
-                   title="{{action.name}}">
-               {{{action.name}}}
-               {{#action.showitemcount}}
-               <span class="badge badge-secondary">{{action.itemcount}}</span>
-               {{/action.showitemcount}}
-            </a>
-        </h6>
+        <div class="d-flex timeline-action-button">
+            <h6 class="event-action">
+                <a class="list-group-item-action btn btn-outline-secondary btn-sm text-nowrap"
+                    href="{{action.url}}"
+                    aria-label="{{action.name}}"
+                    title="{{action.name}}">
+                {{{action.name}}}
+                {{#action.showitemcount}}
+                <span class="badge badge-secondary">{{action.itemcount}}</span>
+                {{/action.showitemcount}}
+                </a>
+            </h6>
+        </div>
         {{/action.actionable}}
     </div>
     <div class="pt-2 border-bottom"></div>
diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index 0eddb248866..bbc6e570560 100644
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -328,6 +328,12 @@ body.drawer-open-left #region-main.has-blocks {
     }
 }
 
+.block_timeline {
+    .event-action {
+        padding-left: 5.55em;
+    }
+}
+
 // Show expand collapse with font-awesome.
 .block_settings .block_tree [aria-expanded="true"],
 .block_settings .block_tree [aria-expanded="true"].emptybranch,
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 9ca411e7dcd..558a97fcbe1 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -13049,6 +13049,9 @@ body.dragging .dragging {
 .block_timeline .paged-content-page-container {
   background-color: #fff; }
 
+.block_timeline .event-action {
+  padding-left: 5.55em; }
+
 .block_settings .block_tree [aria-expanded="true"],
 .block_settings .block_tree [aria-expanded="true"].emptybranch,
 .block_settings .block_tree [aria-expanded="false"],
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 85f8d382e18..0702f8db870 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -13049,6 +13049,9 @@ body.dragging .dragging {
 .block_timeline .paged-content-page-container {
   background-color: #fff; }
 
+.block_timeline .event-action {
+  padding-left: 5.55em; }
+
 .block_settings .block_tree [aria-expanded="true"],
 .block_settings .block_tree [aria-expanded="true"].emptybranch,
 .block_settings .block_tree [aria-expanded="false"],