fix chatlist item preview icon distortion (#4064)

* Fixing distorted summaryPreviewImage * added changelog entry and pr number * fixed formatting
deltachat · Aug 3, 2024 · 72bb581 · 72bb581
1 parent 115716e
commit 72bb581
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -56,6 +56,8 @@
 - fix "Password and Account" dialog not indicating invalid credentials, making it seem that you can change password like this #4032
 - fix empty context menu and unneccessary separators in HTML mail view #4053
 - fix Icon preview of latest WebXDC displayed when summary is reaction event #4062
+- fix stretched summaryPreviewIcon #4064
+
 
 <a id="1_46_1"></a>
 

diff --git a/scss/chat/_chat-list-item.scss b/scss/chat/_chat-list-item.scss
@@ -110,14 +110,16 @@
         color: var(--chat-list-item-summary-text);
         user-select: none;
 
-        & > img.summary_thumbnail {
+        & > .summary_thumbnail {
           height: 18px;
           width: 18px;
           min-width: 18px;
           min-height: 18px;
           border-radius: 3px;
           margin-inline-start: 3px;
           margin-inline-end: 4px;
+          background-size: cover;
+          background-position: center;
         }
 
         & > .summary {

diff --git a/src/renderer/components/chat/ChatListItem.tsx b/src/renderer/components/chat/ChatListItem.tsx
@@ -100,12 +100,20 @@ function Message({
           </div>
         )}
         {summaryPreviewImage && !iswebxdc && (
-          <img className='summary_thumbnail' src={summaryPreviewImage} />
+          <div
+            className='summary_thumbnail'
+            style={{ backgroundImage: `url(${summaryPreviewImage})` }}
+          />
         )}
         {iswebxdc && lastMessageId && (
-          <img
+          <div
             className='summary_thumbnail'
-            src={runtime.getWebxdcIconURL(selectedAccountId(), lastMessageId)}
+            style={{
+              backgroundImage: `url(${runtime.getWebxdcIconURL(
+                selectedAccountId(),
+                lastMessageId
+              )})`,
+            }}
           />
         )}
         <div>{message2React(summaryText2 || '', true)}</div>