From 8e3fa4be29c257270c445022bb7c2647a14fc505 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Sun, 19 Feb 2023 03:56:55 +0530
Subject: [PATCH] Fix/email responsive bug (#6901)

* fix: prevent overflow of url

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: manage link responsive in emails

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 packages/emails/src/components/ManageLink.tsx | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/emails/src/components/ManageLink.tsx b/packages/emails/src/components/ManageLink.tsx
index d5a0563cda..7f3051db43 100644
--- a/packages/emails/src/components/ManageLink.tsx
+++ b/packages/emails/src/components/ManageLink.tsx
@@ -23,25 +23,37 @@ export function ManageLink(props: { calEvent: CalendarEvent; attendee: Person })
           style={{
             fontWeight: 400,
             lineHeight: "24px",
-            display: "flex",
-            justifyContent: "center",
+            textAlign: "center",
             width: "100%",
-            gap: "8px",
           }}>
           <>{t("need_to_make_a_change")}</>
+
           {!props.calEvent.recurringEvent && (
-            <>
+            <span>
               <a
                 href={getRescheduleLink(props.calEvent)}
-                style={{ color: "#374151", marginLeft: "5px", marginRight: "5px" }}>
+                style={{
+                  color: "#374151",
+                  marginLeft: "5px",
+                  marginRight: "5px",
+                  textDecoration: "underline",
+                }}>
                 <>{t("reschedule")}</>
               </a>
               <>{t("or_lowercase")}</>
-            </>
+            </span>
           )}
-          <a href={getCancelLink(props.calEvent)} style={{ color: "#374151", marginLeft: "5px" }}>
-            <>{t("cancel")}</>
-          </a>
+          <span>
+            <a
+              href={getCancelLink(props.calEvent)}
+              style={{
+                color: "#374151",
+                marginLeft: "5px",
+                textDecoration: "underline",
+              }}>
+              <>{t("cancel")}</>
+            </a>
+          </span>
         </p>
       </div>
     );