diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css index 058da76d7b8ea..1e39e4ebdb662 100644 --- 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 {