Email input on .org Jetpack subscription widget overflows container, needs CSS adjustment.

[McGuive7]

Sample URL (right sidebar):
​https://make.wordpress.org/core/

The email input in the Jetpack subscription widget in the right sidebar overflows its container and is cut off on the above URL, and possibly others. Jetpack's CSS (/wp-content/plugins/jetpack/modules/subscriptions/subscriptions.css) has the following CSS:

#subscribe-email input {
    width: 95%;
    padding: 1px 2px;
}

The input padding and border on the input causes it to overflow its container and be cut off. The following CSS rule would fix this issue:

#subscribe-email input {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

[diddledani]

would this be better as a bug filed with JetPack rather than meta?

[iandunn]

Replying to diddledan:

would this be better as a bug filed with JetPack rather than meta?

It looks like a conflict between the p2 theme and Jetpack's Subscriptions module, because of the #subscribe-email input rule that Mickey mentioned, and the following rule from p2.

#wrapper form input[type="text"],
#wrapper form input[type="url"],
#wrapper form input[type="email"],
#wrapper form input[type="number"],
#wrapper form input[type="search"],
#wrapper form input[type="password"],
.inlineediting input[type="text"],
.inlineediting input[type="url"],
.inlineediting input[type="email"],
.inlineediting input[type="number"],
.inlineediting input[type="search"],
.inlineediting input[type="password"] {
	border: solid;
	border-width: 1px;
	padding: 5px 7px;
}

The padding from p2 takes precedence over Jetpack's padding.

I doubt that either project is going to try and support individual themes/plugins, so it's probably just something we should fix in our wporg-p2 child theme.

​box-sizing is supported by all modern browsers, so I don't think we need the vendor-prefixed rules.

The problem affects almost all input fields in the sidebar with width: 100%, though, not just the subscription widget. The search input isn't affected because it has additional rules on it. So, the solution should work for all inputs too, not just the subscription input.

Just adding the box-sizing rule to the selectors above should do the trick.

For simple fixes like this, pasting the solution into the ticket description or a comment is enough, we don't need an actual patch.

[iandunn]

In 2234:

W.org P2 child theme: Prevent sidebar input fields from overflowing.

Fixes #678
Props McGuive7