From d41ee3d3d85a0ec07eb4679dcee3a7aefd7dba91 Mon Sep 17 00:00:00 2001 From: sayyedarib Date: Wed, 20 Dec 2023 12:25:10 +0530 Subject: [PATCH] user_status: Fix alignment of select-emoji icon of user-status modal. use flex display justify-content for vertical alignment instead of using offsets like "top". for horizontal alignment of smiley-icon use text-align center. Signed-off-by: sayyedarib --- web/styles/user_status.css | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/web/styles/user_status.css b/web/styles/user_status.css index 8370c6471c..18cbfb6428 100644 --- a/web/styles/user_status.css +++ b/web/styles/user_status.css @@ -4,6 +4,7 @@ .user-status-content-wrapper { display: flex; + justify-content: center; align-items: center; border: 1px solid; border-color: hsl(0deg 0% 0% / 60%); @@ -30,26 +31,16 @@ width: 20px; height: 20px; cursor: pointer; - /* - the following rule is not necessarily better than the one - from a6bef5154197b15c20445526fd3f219b4f2e5379 but it works. - */ - top: -2px; } /* For custom emojis and smiley icon to take full width. */ & img.selected-emoji, .smiley-icon { + text-align: center; min-width: 20px; } .smiley-icon { - display: block; - font-size: 18px; - position: relative; - top: -2px; - left: 2px; - &:hover { text-decoration: none; }