Fix alignment of user menu avatar (#12289)

* Fix alignment of user menu avatar #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 <[email protected]> * Reference the span by class * The img wasn't actually necessary here --------- Co-authored-by: Robin <[email protected]>
matrix-org · Feb 27, 2024 · 5ac222e · 5ac222e
1 parent db6f7da
commit 5ac222e
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 1 deletion.
diff --git a/...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
diff --git a/...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
diff --git a/res/css/structures/_SpacePanel.pcss b/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;
+        }
     }
 }