Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Fixed minimal form padding

Browse source 
no issue

Previous change made the viewport always maximum 440px, so it always triggered the `sm` breakpoint
This commit is contained in:
Simon Backx 2023-06-09 11:04:44 +02:00
parent 6cdaf04fcd
commit 66840cda0a
2 changed files with 3 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/signup-form/src/components/pages/FormView.tsx
View file

@ -60,7 +60,7 @@ const Form: React.FC<FormProps> = ({isMinimal, loading, success, error, buttonCo
<>
<form className='relative mx-auto flex w-full' onSubmit={submitHandler}>
<input
className={`flex-1 rounded-[.5rem] border bg-white p-2 text-grey-900 transition hover:border-grey-400 focus-visible:border-grey-500 focus-visible:outline-none disabled:bg-white sm:px-3 sm:py-[1rem] ${error ? '!border-red-500' : 'border-grey-300'}`}
className={`flex-1 rounded-[.5rem] border bg-white p-2 text-grey-900 transition hover:border-grey-400 focus-visible:border-grey-500 focus-visible:outline-none disabled:bg-white xs:px-3 xs:py-[1rem] ${error ? '!border-red-500' : 'border-grey-300'}`}
data-testid="input"
disabled={loading || success}
placeholder='jamie@example.com'
@ -69,7 +69,7 @@ const Form: React.FC<FormProps> = ({isMinimal, loading, success, error, buttonCo
onChange={e => setEmail(e.target.value)}
/>
<button
className='absolute inset-y-0 right-[.2rem] my-auto grid h-7 items-center justify-items-center rounded-[.3rem] px-2 font-medium text-white sm:right-[.3rem] sm:h-[3rem] sm:px-3'
className='absolute inset-y-0 right-[.2rem] my-auto grid h-7 items-center justify-items-center rounded-[.3rem] px-2 font-medium text-white xs:right-[.3rem] xs:h-[3rem] xs:px-3'
data-testid="button"
disabled={loading || success}
style={{backgroundColor: buttonColor, color: buttonTextColor}}

1
ghost/signup-form/tailwind.config.cjs
View file

@ -6,6 +6,7 @@ module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
screens: {
xs: '439px',
sm: '480px',
md: '640px',
lg: '1024px',