Merge branch 'MDL-64102-36' of git://github.com/bmbrands/moodle into MOODLE_36_STABLE

message/templates/message_drawer_view_conversation_body_message.mustache

@@ -35,13 +35,14 @@
 
 }}
 <div
-    class="message clickable d-flex flex-column p-2 {{#fromloggedinuser}}bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
+    class="message clickable d-flex flex-column p-2 mx-1 position-relative {{#fromloggedinuser}}send bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}received bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
     data-region="message"
     data-message-id="{{id}}"
     role="checkbox"
     aria-checked="false"
     tabindex="0"
 >
+    <div class="tail position-absolute"></div>
     <div class="d-flex align-items-center {{^fromloggedinuser}}pb-2{{/fromloggedinuser}}">
         {{^fromloggedinuser}}
         <div style="flex-shrink: 0">
@@ -67,4 +68,4 @@
         <span class="hidden ml-2 small text-primary" data-region="selected-icon">{{#pix}} i/checkedcircle, core {{/pix}}</span>
     </div>
     <div dir="auto" align="initial">{{{text}}}</div>
-</div>
+</div>

theme/boost/scss/moodle/message.scss

@@ -1357,7 +1357,26 @@ $message-drawer-width: 320px;
             overflow: hidden;
         }
     }
-
+    .message {
+        .tail {
+            content: '';
+            bottom: 0;
+            width: 0;
+            height: 0;
+            border: 0.5rem solid transparent;
+            position: relative;
+        }
+        &.send .tail {
+            right: 0;
+            margin-right: -0.5rem;
+            border-bottom-color: map-get($theme-colors, 'secondary');
+        }
+        &.received .tail {
+            left: 0;
+            margin-left: -0.5rem;
+            border-bottom-color: $white;
+        }
+    }
     .lazy-load-list {
         overflow-y: auto;
     }

theme/boost/style/moodle.css

@@ -14218,6 +14218,21 @@ a.ygtvspacer:hover {
     min-height: 1.5rem; }
   .message-drawer .section .collapsing {
     overflow: hidden; }
+  .message-drawer .message .tail {
+    content: '';
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border: 0.5rem solid transparent;
+    position: relative; }
+  .message-drawer .message.send .tail {
+    right: 0;
+    margin-right: -0.5rem;
+    border-bottom-color: #ced4da; }
+  .message-drawer .message.received .tail {
+    left: 0;
+    margin-left: -0.5rem;
+    border-bottom-color: #fff; }
   .message-drawer .lazy-load-list {
     overflow-y: auto; }
 

theme/bootstrapbase/less/moodle/message.less

@@ -1360,6 +1360,26 @@
     .last-message {
         min-height: 20px;
     }
+    .message {
+        .tail {
+            content: '';
+            bottom: 0;
+            width: 0;
+            height: 0;
+            border: 0.5rem solid transparent;
+            position: relative;
+        }
+        &.send .tail {
+            right: 0;
+            margin-right: -0.5rem;
+            border-bottom-color: #e9ecef;
+        }
+        &.received .tail {
+            left: 0;
+            margin-left: -0.5rem;
+            border-bottom-color: @white;
+        }
+    }
 
     .lazy-load-list {
         overflow-y: auto;

theme/bootstrapbase/style/moodle.css

@@ -9251,6 +9251,24 @@ a.ygtvspacer:hover {
 .message-drawer .last-message {
   min-height: 20px;
 }
+.message-drawer .message .tail {
+  content: '';
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border: 0.5rem solid transparent;
+  position: relative;
+}
+.message-drawer .message.send .tail {
+  right: 0;
+  margin-right: -0.5rem;
+  border-bottom-color: #e9ecef;
+}
+.message-drawer .message.received .tail {
+  left: 0;
+  margin-left: -0.5rem;
+  border-bottom-color: #fff;
+}
 .message-drawer .lazy-load-list {
   overflow-y: auto;
 }

theme/bootstrapbase/templates/core_message/message_drawer_view_conversation_body_message.mustache

@@ -39,13 +39,14 @@
 }}
 
 <div
-    class="message clickable d-flex flex-column p-2 {{#fromloggedinuser}}bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
+    class="message clickable d-flex flex-column p-2 mx-1 position-relative {{#fromloggedinuser}}send bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}received bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
     data-region="message"
     data-message-id="{{id}}"
     aria-checked="false"
     role="checkbox"
     tabindex="0"
 >
+    <div class="tail position-absolute"></div>
     <div class="d-flex align-items-center {{^fromloggedinuser}}pb-2{{/fromloggedinuser}}">
         {{^fromloggedinuser}}
         <div style="flex-shrink: 0">