Fix regression from f1bfc90

Since user avatar icons are now using --btn-img-size, the following chip dimensions have to be adjusted from --btn-size to --btn-img-size and use "box-sizing: border-box" to ensure avatar icons align properly within the chip without overlap or layout issues Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I4ad71e2935a17275b6fa1f2ef1568cf6d68adcc0
CollaboraOnline · Jan 2, 2025 · c0c8909 · c0c8909
1 parent 9554bd0
commit c0c8909
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
@@ -1607,14 +1607,14 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 
 #followingChipBackground,
 #userListSummaryBackground {
-	border-radius: var(--btn-size); /* We expect the height to be --btn-size, give a bit for a border. To fully round the corners, this needs to be at least 50% of the height so --btn-size should do */
+	border-radius: var(--btn-img-size); /* We expect the height to be --btn-img-size, give a bit for a border. To fully round the corners, this needs to be at least 50% of the height so --btn-img-size should do */
 	padding: 2px; /* This will become the grey border around the inner elements */
 
 	display: none;
 }
 
 #followingChipBackground {
-	transform: translateX(calc(4px /* border widths */ + 4px /* background paddings */ + var(--btn-size) - 0.6px /* browser rendering fudge */));
+	transform: translateX(calc(2.5px /* border widths */ + 2.5px /* background paddings */ + var(--btn-img-size) - 0.6px /* browser rendering fudge */));
 	/* We'd like this to flow over the first item of the userListSummary. I've added a fudge because browser rendering seems to have subpixel errors here and it's far better to
 	 * render the border marginally too far left than leave a gap. */
 }
@@ -1639,11 +1639,11 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 #followingChipBackground > #followingChip {
 	border-style: solid;
 	border-width: 2px;
-	border-radius: calc(var(--btn-size));
+	border-radius: calc(var(--btn-img-size));
 
-	height: var(--btn-size);
-	padding-left: calc(var(--btn-size) * 0.4);
-	padding-right: calc(var(--btn-size) * 1.2);
+	height: var(--btn-img-size);
+	padding-left: calc(var(--btn-img-size) * 0.4);
+	padding-right: calc(var(--btn-img-size) * 1.2);
 
 	display: flex;
 	flex-direction: column;
@@ -1652,6 +1652,7 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 
 	color: var(--color-main-text);
 	background-color: var(--color-main-background);
+	box-sizing: border-box;
 }
 
 #userListSummaryBackground > #userListSummary {