fix(form): make time inputs wider on desktop

coderbyheart · coderbyheart · commit 53682fe9d2a2 · 2020-05-10T16:08:50.000+02:00
diff --git a/src/style/Form.tsx b/src/style/Form.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { wideBreakpoint } from './settings'
+import { wideBreakpoint, mobileBreakpoint } from './settings'
 
 export const Button = styled.button`
 	background-color: transparent;
@@ -38,6 +38,9 @@ export const DateInput = styled(Input)`
 `
 export const NumberInput = styled(Input)`
 	width: 30px;
+	@media (min-width: ${mobileBreakpoint}) {
+		width: 60px;
+	}
 `
 
 export const DateEditor = styled.div`

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import styled from 'styled-components'`
`2`		`-import { wideBreakpoint } from './settings'`
	`2`	`+import { wideBreakpoint, mobileBreakpoint } from './settings'`
`3`	`3`
`4`	`4`	export const Button = styled.button`
`5`	`5`	`background-color: transparent;`
@@ -38,6 +38,9 @@ export const DateInput = styled(Input)`
`38`	`38`	`
`39`	`39`	export const NumberInput = styled(Input)`
`40`	`40`	`width: 30px;`
	`41`	`+ @media (min-width: ${mobileBreakpoint}) {`
	`42`	`+ width: 60px;`
	`43`	`+ }`
`41`	`44`	`
`42`	`45`
`43`	`46`	export const DateEditor = styled.div`