Steps to replicate the issue (include links if applicable):
- In Minerva, view the page action buttons on a mobile viewport (below 640px)
- View them again at a tablet viewport (640px or above)
What happens?:
- Below 640px, the large icon-only buttons are 44px wide. This is the correct width from Codex.
- At or above 640px, the buttons are 46px wide. This is due to a padding of @spacing-75 being set on them to fix a bug (T401361). That padding value doesn't account for the button border, so it adds a pixel on each side.
This is causing issues with the pulsating dot we're adding to the "save" button as part of T422163, where the dot is meant to be centered above the icon. We can fix that with CSS, but regardless, the 2px different could cause other issues in the future.
What should have happened instead?:
The icon-only buttons should be the same size regardless of viewport.
To achieve this, we need to change the padding value in pageactions.less from 0 @spacing-75 to 0 calc( @spacing-75 - @border-width-base ):
.page-actions-menu__list-item {
display: flex;
justify-content: flex-end;
align-items: center;
min-width: 0;
.cdx-button {
color: @color-subtle !important;
font-weight: 500;
@media all and ( min-width: @min-width-breakpoint-tablet ) {
// TODO: Change this.
padding: 0 @spacing-75;
}
}
}


