Description

Adding a categories block can cause a horizontal scrollbar, and a solution is hard to find. The problem seems to appear by turning the option "show label" off. The invisible label-element gets the CSS property "width: 100%" because the specifity of the class ".screen-reader-text" is not strong enough to overwrite the width property defined for the classes ".wp-block-categories .wp-block-categories__label", and because it is positioned absolute it can get huge widths in many cases.

The following 2 CSS Styles collide in that case:

.wp-block-categories .wp-block-categories__label {
display: block;
width: 100%;
}

and

.screen-reader-text
{
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}

Step-by-step reproduction instructions

Fullsite Editing: create a group block as row and set justification to right, place a categories block inside with the following options:
on - display as dropdown
off - Show label
on - Show post counts

Expected behaviour

showing a categories block aligned right without side effects

Actual behaviour

A horizontal scrollbar appears because the invisible label has a huge width

WordPress information

• WordPress version: 6.8
• Gutenberg version: "Not installed"
• Are all plugins except Gutenberg deactivated? "Yes"
• Are you using a default theme (e.g. Twenty Twenty-One)? "No"

Device information

• Device: Chrome on Desktop and on redmi Phone
• Operating system: macos 26, Android 14