Fix alignment of user menu avatar (#12289)

* Fix alignment of user menu avatar

https://github.com/matrix-org/matrix-react-sdk/pull/12267 made the avatar
a couple of pixels out of alignment with the space icons. It just needed
to be moved 2px to the right to match the 18px margin of the space icons
(including the padding from the black border).

Also change elements in the user menu to block elements so they don't
generate extra vertical space in the user menu div, which was causing the
hairline to be too far down.

* Update snapshots

* Typo

Co-authored-by: Robin <robin@robin.town>

* Reference the span by class

* The img wasn't actually necessary here

---------

Co-authored-by: Robin <robin@robin.town>

res/css/structures/_SpacePanel.pcss

@@ -390,8 +390,16 @@ limitations under the License.
     .mx_UserMenu {
         padding-bottom: 12px;
         border-bottom: 1px solid $separator;
-        margin: 12px 14px 4px 16px;
+        margin: 12px 14px 4px 18px;
+        width: min-content;
         max-width: 226px;
+
+        /* Display the container and img here as block elements so they don't take
+         * up extra vertical space.
+         */
+        .mx_UserMenu_userAvatar_BaseAvatar {
+            display: block;
+        }
     }
 }