From 997d8ab8b32be6ffad96db87a8f5cd555bddd13f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 12 May 2022 13:21:22 +0000
Subject: [PATCH] =?UTF-8?q?Fix=20button=20width=20and=20align=20=E7=B5=B5?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=20(emoji)=20on=20the=20user=20panel=20(#8562?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix button width and align 絵文字 (emoji) on the user panel

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* mx_UserInfo_container:not(.mx_UserInfo_separator)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move the spinner to the center

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add indent to 'Unable to load session list' paragraph

Because the indent style has been specified with ':not(h3)', wrapping
with something is required for the indent.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Align the spinner to the center

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove margin of paragraph inside div on verification panel

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 .../views/right_panel/_VerificationPanel.scss | 26 ++++++++++++++++++-
 src/components/views/right_panel/UserInfo.tsx |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index ff5b5f0dc1..972eb9197f 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -23,7 +23,31 @@ limitations under the License.
     }
 }
 
-.mx_UserInfo {
+.mx_UserInfo.mx_BaseCard {
+    .mx_UserInfo_container:not(.mx_UserInfo_separator) {
+
+        > div > p {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        .mx_VerificationPanel_verifyByEmojiButton,
+        .mx_UserInfo_wideButton {
+            width: fit-content;
+        }
+
+        .mx_EncryptionInfo_spinner,
+        .mx_VerificationShowSas {
+            margin-inline-start: auto;
+            margin-inline-end: auto;
+        }
+
+        .mx_Spinner,
+        .mx_VerificationShowSas {
+            align-items: center;
+        }
+    }
+
     .mx_EncryptionPanel_cancel {
         @mixin customisedCancelButton;
         width: 14px;
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 7b45746c77..f1c956bb8f 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -249,7 +249,7 @@ function DevicesSection({ devices, userId, loading }: { devices: IDevice[], user
         return <Spinner />;
     }
     if (devices === null) {
-        return <>{ _t("Unable to load session list") }</>;
+        return <p>{ _t("Unable to load session list") }</p>;
     }
     const isMe = userId === cli.getUserId();
     const deviceTrusts = devices.map(d => cli.checkDeviceTrust(userId, d.deviceId));