Design issues on success page in some languages (#3900)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: Matheus Benini <matheus_benini@hotmail.com>
Co-authored-by: Grace Nshokano <grace.devolop@gmail.com>
Co-authored-by: Matheus Muniz <matheusmuniz100@hotmail.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

Author: 8 people

apps/web/pages/success.tsx

@@ -409,8 +409,8 @@ export default function Success(props: SuccessProps) {
                       </span>
                       <div
                         className={classNames(
-                          "items-center self-center ltr:mr-2 rtl:ml-2 dark:text-gray-50  sm:justify-center",
-                          !props.recurringBookings ? "flex sm:ml-7" : ""
+                          "col-span-2 items-center dark:text-gray-50",
+                          !props.recurringBookings ? "flex" : ""
                         )}>
                         <button className="underline" onClick={() => setIsCancellationMode(true)}>
                           {t("cancel")}
@@ -436,11 +436,11 @@ export default function Success(props: SuccessProps) {
                     />
                   ))}
                 {userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
-                  <div className="border-bookinglightest mt-9 flex flex-col border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:flex-row sm:pt-4">
-                    <span className="mb-4 flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50 sm:mb-0">
+                  <div className="border-bookinglightest text-bookingdark mt-2 grid-cols-3 border-b py-4 text-left dark:border-gray-900 sm:grid">
+                    <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                       {t("add_to_calendar")}
                     </span>
-                    <div className="flex flex-grow justify-center text-center sm:-ml-16">
+                    <div className="justify-left mt-1 flex flex-grow text-left sm:mt-0">
                       <Link
                         href={
                           `https://calendar.google.com/calendar/r/eventedit?dates=${date
@@ -457,7 +457,7 @@ export default function Success(props: SuccessProps) {
                               encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
                             : "")
                         }>
-                        <a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
+                        <a className="mr-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
                           <svg
                             className="-mt-1.5 inline-block h-4 w-4"
                             fill="currentColor"