diff --git a/blocks/timeline/tests/behat/block_timeline_search.feature b/blocks/timeline/tests/behat/block_timeline_search.feature
index f25bbd4cf85..5814ea418a3 100644
--- a/blocks/timeline/tests/behat/block_timeline_search.feature
+++ b/blocks/timeline/tests/behat/block_timeline_search.feature
@@ -141,7 +141,7 @@ Feature: The timeline block allows users to search for upcoming activities
     And I should see "Test choice 7" in the ".block-timeline [data-region='view-courses']" "css_element"
     And I should see "Test choice 8" in the ".block-timeline [data-region='view-courses']" "css_element"
     When I set the field "Search by activity type or name" to "choice 1"
-    And I wait until "Course 4" "text" does not exist
+    And I wait until "//h4[contains(@class, 'h5') and contains(.,'Course 4')]" "xpath_element" does not exist
     Then I should see "Test choice 1" in the "Timeline" "block"
     And I should see "Course 2" in the ".block-timeline [data-region='view-courses']" "css_element"
     And I should not see "Course 1" in the ".block-timeline [data-region='view-courses']" "css_element"
diff --git a/calendar/renderer.php b/calendar/renderer.php
index 5134fa007fa..3693953d85b 100644
--- a/calendar/renderer.php
+++ b/calendar/renderer.php
@@ -206,7 +206,7 @@ class core_calendar_renderer extends plugin_renderer_base {
         }
 
         $contextrecords = [];
-        $courses = calendar_get_default_courses($courseid, 'id, shortname');
+        $courses = calendar_get_default_courses($courseid, 'id, fullname');
 
         if (!empty($courses) && count($courses) > CONTEXT_CACHE_MAX_SIZE) {
             // We need to pull the context records from the DB to preload them
@@ -235,7 +235,9 @@ class core_calendar_renderer extends plugin_renderer_base {
                 context_helper::preload_from_record($contextrecords[$course->id]);
             }
             $coursecontext = context_course::instance($course->id);
-            $courseoptions[$course->id] = format_string($course->shortname, true, array('context' => $coursecontext));
+            // Limit the displayed course name to prevent the dropdown from getting too wide.
+            $coursename = shorten_text($course->fullname, 50, true);
+            $courseoptions[$course->id] = format_string($coursename, true, ['context' => $coursecontext]);
         }
 
         if ($courseid) {
@@ -260,7 +262,7 @@ class core_calendar_renderer extends plugin_renderer_base {
         }
         $select = html_writer::label($label, $filterid, false, $labelattributes);
         $select .= html_writer::select($courseoptions, 'course', $selected, false,
-                ['class' => 'cal_courses_flt ml-1 mr-auto', 'id' => $filterid]);
+                ['class' => 'cal_courses_flt ml-1 mr-auto mr-2 mb-2', 'id' => $filterid]);
 
         return $select;
     }
diff --git a/calendar/templates/add_event_button.mustache b/calendar/templates/add_event_button.mustache
index 115e58ce5db..06cdebfd80d 100644
--- a/calendar/templates/add_event_button.mustache
+++ b/calendar/templates/add_event_button.mustache
@@ -34,7 +34,7 @@
 }}
 {{#defaulteventcontext}}
 <button{{!
-    }} class="btn btn-primary float-sm-right float-right"{{!
+    }} class="btn btn-primary float-sm-right float-right ml-1 mb-2"{{!
     }} data-context-id="{{defaulteventcontext}}"{{!
     }} data-action="new-event-button"{{!
     }}>
diff --git a/calendar/templates/view_selector.mustache b/calendar/templates/view_selector.mustache
index 6a9de4cad1d..a0d5ce36edf 100644
--- a/calendar/templates/view_selector.mustache
+++ b/calendar/templates/view_selector.mustache
@@ -27,7 +27,7 @@
     }
 }}
 <div data-region="view-selector">
-    <button id="calendarviewdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button id="calendarviewdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle ml-1 mr-2 mb-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="d-sm-inline-block" data-active-item-text>
             {{#viewingmonth}}{{#str}} month {{/str}}{{/viewingmonth}}
             {{#viewingday}}{{#str}} day, core_calendar {{/str}}{{/viewingday}}
diff --git a/calendar/tests/behat/calendar.feature b/calendar/tests/behat/calendar.feature
index ff681b5c0f8..14f9951eb89 100644
--- a/calendar/tests/behat/calendar.feature
+++ b/calendar/tests/behat/calendar.feature
@@ -77,7 +77,7 @@ Feature: Perform basic calendar functionality
   Scenario: Create a group event
     Given I log in as "teacher1"
     And I follow "Full calendar"
-    And I set the field "course" to "C1"
+    And I set the field "course" to "Course 1"
     And I create a calendar event:
       | Type of event | group |
       | Group         | Group 1 |
@@ -217,7 +217,7 @@ Feature: Perform basic calendar functionality
     And I click on "New event" "button"
     Then the field "Type of event" matches value "User"
     And I click on "Close" "button" in the "New event" "dialogue"
-    And I set the field "course" to "C1"
+    And I set the field "course" to "Course 1"
     When I click on "New event" "button"
     Then the field "Type of event" matches value "Course"
 
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 84e318729f4..03218acb894 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -279,6 +279,9 @@ div#dateselector-calendar-panel {
     margin: 0;
     cursor: pointer;
     color: $body-color;
+    word-break: normal;
+    overflow-wrap: anywhere;
+    white-space: normal;
     &:hover,
     &:focus,
     &[aria-selected="true"] {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index bba2e639d67..668038afe02 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -33165,6 +33165,9 @@ div#dateselector-calendar-panel {
   margin: 0;
   cursor: pointer;
   color: #1d2125;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 .form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected=true] {
   background-color: #0f6cbf;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 6607b1a5b66..082a1fa8549 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -33165,6 +33165,9 @@ div#dateselector-calendar-panel {
   margin: 0;
   cursor: pointer;
   color: #1d2125;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 .form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected=true] {
   background-color: #0f6cbf;