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

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

Signed-off-by: Suguru Hirahara <[email protected]>

* mx_UserInfo_container:not(.mx_UserInfo_separator)

Signed-off-by: Suguru Hirahara <[email protected]>

* Move the spinner to the center

Signed-off-by: Suguru Hirahara <[email protected]>

* 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 <[email protected]>

* Align the spinner to the center

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove margin of paragraph inside div on verification panel

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

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;

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));