From c683ec986ac77d657587d74e37ca22c1717998ad Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Thu, 31 Oct 2024 17:51:50 +0400
Subject: [PATCH] style: fix avatar in profile being oval-shaped

Manifests itself when focusing and hovering it.
---
 CHANGELOG.md                                                 | 1 +
 packages/frontend/src/components/Avatar/styles.module.scss   | 5 +++++
 .../src/components/ProfileInfoHeader/styles.module.scss      | 1 +
 3 files changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a814f3af03..8ef75a9da3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
 - revert debian packagename from `deltachat` back to `deltachat-desktop` #4266
 - style: fix VCard color being too bright in dark theme #4255
 - style: less vertical space between radio group items #4298
+- style: fix the avatar in the profile dialog being oval-shaped #4299
 - remove unnecessary horizontal scrollbar in "View Group" dialog #4254
 - add missing cancel buttons to import-/export- and reveive-backup progress dialogs #4272
 - change title and button label of EditAccountAndPasswordDialog to make it clearer that it is about email account #4271, #4279
diff --git a/packages/frontend/src/components/Avatar/styles.module.scss b/packages/frontend/src/components/Avatar/styles.module.scss
index ae2310df69..8b0523be64 100644
--- a/packages/frontend/src/components/Avatar/styles.module.scss
+++ b/packages/frontend/src/components/Avatar/styles.module.scss
@@ -5,7 +5,12 @@
   padding: 0;
   // space for focus outline
   margin: 3px;
+  // Ensure that this element is not taller than the children.
+  display: flex;
   &:hover {
     background-color: var(--buttonHover);
   }
+  :global(.avatar) {
+    --local-avatar-vertical-margin: 0;
+  }
 }
diff --git a/packages/frontend/src/components/ProfileInfoHeader/styles.module.scss b/packages/frontend/src/components/ProfileInfoHeader/styles.module.scss
index 661234af0a..52365368d3 100644
--- a/packages/frontend/src/components/ProfileInfoHeader/styles.module.scss
+++ b/packages/frontend/src/components/ProfileInfoHeader/styles.module.scss
@@ -1,5 +1,6 @@
 .profileInfoHeader {
   display: flex;
+  --local-avatar-vertical-margin: 0;
 }
 
 .infoContainer {