fixed layout for confirmation screen on mobile

This commit is contained in:
Peer Richelsen 2021-07-03 22:27:56 +02:00
parent 58c1c935c2
commit 749978798b

View file

@ -147,8 +147,8 @@ export default function Book(props: any): JSX.Element {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className="max-w-3xl mx-auto my-24"> <main className="max-w-3xl mx-auto my-0 sm:my-24">
<div className="bg-white overflow-hidden shadow rounded-lg"> <div className="bg-white overflow-hidden sm:shadow sm:rounded-lg">
<div className="sm:flex px-4 py-5 sm:p-6"> <div className="sm:flex px-4 py-5 sm:p-6">
<div className="sm:w-1/2 sm:border-r"> <div className="sm:w-1/2 sm:border-r">
<Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" /> <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
@ -171,9 +171,9 @@ export default function Book(props: any): JSX.Element {
.tz(preferredTimeZone) .tz(preferredTimeZone)
.format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")} .format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
</p> </p>
<p className="text-gray-600">{props.eventType.description}</p> <p className="text-gray-600 mb-8">{props.eventType.description}</p>
</div> </div>
<div className="sm:w-1/2 pl-8 pr-4"> <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
<form onSubmit={bookingHandler}> <form onSubmit={bookingHandler}>
<div className="mb-4"> <div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-gray-700"> <label htmlFor="name" className="block text-sm font-medium text-gray-700">