fix(select): fix select input width for different label display options

hanneke · Ian Wensink · commit 9343d3d387ed · 2018-03-07T16:20:25.000+01:00
diff --git a/src/SelectField/styled/wrapper.js b/src/SelectField/styled/wrapper.js
@@ -463,7 +463,7 @@ export default styled.div`
   padding-right: 20px;
 
   @media (min-width: 768px) {
-    width: calc(${p => p.theme.inputWidth} * 1.3);
+    width: calc(${p => p.theme.inlineLabelWidth} + ${p => p.theme.inputWidth} + 20px);
   }
 
   ${p => p.labelDisplay === 'inline' && `
@@ -472,6 +472,7 @@ export default styled.div`
 
     @media (min-width: 768px) {
       display: inline-block;
+      width: calc(${p.theme.inputWidth} * 1.3);
     }
 
     & .Select-placeholder,

Original file line number	Diff line number	Diff line change
@@ -463,7 +463,7 @@ export default styled.div`
`463`	`463`	`padding-right: 20px;`
`464`	`464`
`465`	`465`	`@media (min-width: 768px) {`
`466`		`- width: calc(${p => p.theme.inputWidth} * 1.3);`
	`466`	`+ width: calc(${p => p.theme.inlineLabelWidth} + ${p => p.theme.inputWidth} + 20px);`
`467`	`467`	`}`
`468`	`468`
`469`	`469`	${p => p.labelDisplay === 'inline' && `
@@ -472,6 +472,7 @@ export default styled.div`
`472`	`472`
`473`	`473`	`@media (min-width: 768px) {`
`474`	`474`	`display: inline-block;`
	`475`	`+ width: calc(${p.theme.inputWidth} * 1.3);`
`475`	`476`	`}`
`476`	`477`
`477`	`478`	`& .Select-placeholder,`