Fix position of avatar list

Instead of trying to re-position #userListPopover for every case
(compact view, tabbed view and rtl), use flex to align the elements
- This also fixes the positioning discrepancy of both the popover
but also the arrow (triangle)

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I32ed3e05efc51001db106f5baaf18012e87965fe

1 files changed, 1 insertions, 7 deletions

diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index 1c55e5c9a1..09ccf10683 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -1179,13 +1179,13 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 	position: relative;
 	background-color: transparent;
 	display: flex !important;
-	flex-grow: 1;
 	align-items: center;
 	font-family: var(--cool-font);
 	padding-right: 12px;
 	margin-right: 10px;
 	margin-left: 10px;
 	font-size: var(--default-font-size);
+	justify-content: end;
 }
 
 #userListHeader .user-info,
@@ -1216,7 +1216,6 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 	position: absolute;
 	z-index: 1;
 	top: 38px;
-	right: 5px;
 	color: var(--color-main-text);
 	background-color: var(--color-main-background);
 	border-radius: var(--border-radius);
@@ -1225,11 +1224,6 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 	font-size: var(--default-font-size);
 }
 
-html[dir='rtl'] #userListPopover {
-	right: unset !important;
-	left: 5px;
-}
-
 #userListPopover::after {
 	border: 10px solid transparent;
 	border-bottom-color: var(--color-main-background);