Repository navigation
USWDS - Bug: Select padding right causes container overlap #6605
Description
Describe the bug
The padding-right: units(4); in packages/usa-select/src/styles/_usa-select.scss is causing select boxes to overlap their containers. While, going without that padding seems to have no effect on properly displayed select boxes.
Steps to reproduce the bug
- In a USWDS themed Drupal instance, in the Article content type form display settings, set the Author field to Select list.
- Visit the add/edit Article form, click the Author tab at the bottom.
- Observe the select box overlaps the container.
Expected Behavior
The select box should not overlap the contianer.
Related code
No response
Screenshots
System setup
- USWDS 3.11.0
- USWDS Base 3.10.x (Drupal theme)
Additional context
No response
Code of Conduct
- I agree to follow this project's Code of Conduct.
- I checked the current issues for duplicate bug reports.
Activity
jcandan commentedon Apr 8, 2026
Simply removing the
padding-rightfrompackages/usa-select/src/styles/_usa-select.scssfixes the issue without any affect on already correctly-displayed containers.jcandan commentedon Apr 8, 2026
In USWDS Base, it seems
padding-right: 8pxis right. Not sure what to make of that.ethangardner commentedon Jun 23, 2026
Confirmed this issue.
The overflow is caused by a box-sizing conflict.
.usa-selectsets width: 100% and padding-right: 2rem (compiled from units(4)). Under box-sizing: border-box (the USWDS default), the padding is included in the width so everything fits. This is controlled by a global theme setting,$theme-global-border-box-sizing. A host environment like Drupal may have CSS from themes or plugins that reset box-sizing back to content-box. In that case, the 2rem padding would get added on top of width: 100%, making the element 32px wider than its container.Proposed fix: Add
box-sizing: border-boxexplicitly to the.usa-selectrule. This is already the pattern used inusa-combo-boxandusa-searchfor the same reason. The border-box-sizing mixin alone is insufficient protection when embedded in third-party host environments.VenkateshAddala commentedon Jun 26, 2026
Hi maintainers, I’m interested in working on this issue as a first-time contributor. Based on the discussion, I can try adding
box-sizing: border-box;to the.usa-selectrule inpackages/usa-select/src/styles/_usa-select.scss. Please let me know if that approach sounds okay.