fix: blurred news image background detail in firefox

frontend/app/src/app/modules/data/types/message/message-detail-content.html

@@ -44,7 +44,7 @@
   </div>
 } @else {
   @if (item.image) {
-    <ion-thumbnail style="background-image: url('{{ item.image }}')">
+    <ion-thumbnail [style.--image]="'url(' + item.image + ')'">
       <ion-img
         src="{{ item.image }}"
         (ionError)="$any($event.target).nextSibling.style.display = 'none'"

frontend/app/src/app/modules/data/types/message/message-detail-content.scss

@@ -16,7 +16,6 @@
 :host {
   ion-thumbnail {
     position: relative;
-    transform: scaleX(-1);
 
     overflow: hidden;
 
@@ -24,14 +23,20 @@
     height: auto;
     margin-inline: auto;
 
-    background-position: center;
-    background-size: contain;
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset: -32px;
+
+      background: var(--image) center / cover;
+      filter: blur(32px);
+    }
 
     ion-img {
-      backdrop-filter: blur(32px);
+      position: relative; // above ::before
 
       &::part(image) {
-        transform: scaleX(-1);
         max-width: 16cm;
         margin-inline: auto;
         object-fit: contain;