diff --git a/packages/select/src/components/select/_select.scss b/packages/select/src/components/select/_select.scss index 2e017a81165..a4aa659ba29 100644 --- a/packages/select/src/components/select/_select.scss +++ b/packages/select/src/components/select/_select.scss @@ -3,11 +3,13 @@ @import "../../common/variables"; +$select-padding: $pt-grid-size * 0.5; + .#{$ns}-select-popover { .#{$ns}-popover-content { // use padding on container rather than margin on input group // because top margin leaves some empty space with no background color. - padding: $pt-grid-size * 0.5; + padding: $select-padding; } .#{$ns}-input-group { @@ -15,14 +17,19 @@ } .#{$ns}-menu { + // offset the padding added by the select componenent so menu can remain full width with padding on either side + // this is important so menu dividers can be full width, and so that menu items can have padding to the left and right + // for menu items + margin-left: -$select-padding; + margin-right: -$select-padding; max-height: $select-popover-max-height; max-width: $select-popover-max-width; overflow: auto; - padding: 0; + padding: 0 $select-padding; &:not(:first-child) { // adjust padding to account for that on .#{$ns}-popover-content above - padding-top: $pt-grid-size * 0.5; + padding-top: $select-padding; } }