--- a/sat_templates/templates/bulma/chat/message.html	Tue Nov 28 17:48:00 2023 +0100
+++ b/sat_templates/templates/bulma/chat/message.html	Thu Nov 30 13:24:43 2023 +0100
@@ -8,10 +8,9 @@
 
 <div
     id="{{msg.id}}"
-    class="media is-chat-message msg_{{msg.type}} {{'own_msg' if own_msg}}"
-    style="padding: 0.5em;"
+    class="media is-chat-message msg_{{msg.type}} {{'own_msg' if own_msg}} {{ 'is-retracted' if msg.extra.retracted }}"
     role="listitem"
-    aria-label="Chat Message"
+    aria-label="{{ 'Retracted Message' if msg.extra.retracted else 'Chat Message' }}"
     {% if msg.extra.editions %}data-editions='{{msg.extra.editions|tojson}}'{% endif %}
     >
     {%- if msg.type != "info" %}
@@ -52,15 +51,22 @@
                     </div>
                 </nav>
             {% endif -%}
-            <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" }}" id="msg_body_{{msg.id}}" style="margin: 0;">
-            {{- msg.html or (msg.text|e|urlize|safe) -}}
+            <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" or msg.extra.retracted }} m-0" id="msg_body_{{msg.id}}">
+               {%- if msg.extra.retracted %}
+                   {% trans %}This message has been retracted.{% endtrans %}
+               {% else %}
+                   {{- msg.html or (msg.text|e|urlize|safe) -}}
+               {% endif -%}
             </p>
 
             <div class="url-previews is-hidden">
                 <div class="icon-container"></div>
             </div>
 
-            <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
+            <div
+               id="actions_{{msg.id}}"
+               class="level is-mobile actions mb-0 {{ "is-hidden" if msg.extra.retracted }}"
+               >
                 {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
                 {{ icon('smile', cls='icon is-small action-button reaction-button', id='msg_actions_{{msg.id}}') }}
                 {{ icon('dot-3', cls='icon is-small action-button extra-button', id='msg_actions_{{msg.id}}') }}