From 838e8b9e89e9eafcfca0b2b4efe4a08b36730b04 Mon Sep 17 00:00:00 2001
From: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Date: Mon, 11 Nov 2024 13:58:02 +0530
Subject: [PATCH] fix: iframe issue for atoms documentation (#17570)

* fix syntax for code examples

* update iframe styling
---
 .../developing/guides/automation/webhooks.mdx |  2 +-
 .../platform/atoms/apple-calendar-connect.mdx | 19 +++++++++++++------
 docs/platform/atoms/availability-settings.mdx |  8 ++++----
 docs/platform/atoms/booker.mdx                |  8 ++++----
 docs/platform/atoms/calendar-settings.mdx     |  6 +++---
 docs/platform/atoms/event-type.mdx            | 10 +++++-----
 .../atoms/google-calendar-connect.mdx         | 12 ++++++------
 .../atoms/outlook-calendar-connect.mdx        | 12 ++++++------
 docs/platform/atoms/payment-form.mdx          |  4 ++--
 docs/platform/booking-redirects.mdx           |  1 +
 10 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/docs/developing/guides/automation/webhooks.mdx b/docs/developing/guides/automation/webhooks.mdx
index 21893a4368..10a6d65c81 100644
--- a/docs/developing/guides/automation/webhooks.mdx
+++ b/docs/developing/guides/automation/webhooks.mdx
@@ -4,7 +4,7 @@ title: "Webhooks"
 
 
 Webhooks offer a great way to automate the flow with other apps when invitees schedule, cancel or reschedule events, or when the meeting ends. 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/Yy9me5E09LA?si=_2Mz-CKL2ajsFivd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<iframe style={{ width: "100%", maxWidth: "560px" }} height="315" src="https://www.youtube.com/embed/Yy9me5E09LA?si=_2Mz-CKL2ajsFivd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 The webhook subscription allows you to listen to specific trigger events, such as when a booking has been scheduled, for example. You can always listen to the webhook by providing a custom subscriber URL with your own development work. However, if you wish to trigger automations without any development work, you can use the integration with Zapier which connects Cal.com to your apps.
 
diff --git a/docs/platform/atoms/apple-calendar-connect.mdx b/docs/platform/atoms/apple-calendar-connect.mdx
index 5840298b5b..ece2d7098f 100644
--- a/docs/platform/atoms/apple-calendar-connect.mdx
+++ b/docs/platform/atoms/apple-calendar-connect.mdx
@@ -11,9 +11,9 @@ import { Connect } from "@calcom/atoms";
 
 export default function ConnectCalendar() {
   return (
-    <main>
+    <>
       <Connect.AppleCalendar />
-    </main>
+    </>
   );
 }
 ```
@@ -22,7 +22,14 @@ For a demonstration of the Apple calendar connect integration, please refer to t
 
 <p></p>
 
-<iframe width="560" height="315" src="https://www.loom.com/embed/0db65d94754443ae91fed28f9bc10509" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+    <iframe
+      style={{ width: "100%", maxWidth: "560px" }}
+      height="315"
+      src="https://www.loom.com/embed/0db65d94754443ae91fed28f9bc10509?sid=8389e585-ab9c-457f-944f-82ec7e595f13"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen="true"
+    ></iframe>
 
 <p></p>
 
@@ -37,9 +44,9 @@ import { Connect } from "@calcom/atoms";
 
 export default function ConnectCalendar() {
   return (
-    <main>
+    <>
       <Connect.AppleCalendar isMultiCalendar={true} />
-    </main>
+    </>
   );
 }
 ```
@@ -49,8 +56,8 @@ For a demonstration of the Apple calendar connect integration for multiple users
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/5844146fbcf840f99e35f9620a34186d"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/docs/platform/atoms/availability-settings.mdx b/docs/platform/atoms/availability-settings.mdx
index 244e232046..75545e21c7 100644
--- a/docs/platform/atoms/availability-settings.mdx
+++ b/docs/platform/atoms/availability-settings.mdx
@@ -26,7 +26,7 @@ export default function Availability() {
             console.log("Deleted schedule successfully");
           }}
        />
-    <>
+    </>
   )
 }
 ```
@@ -35,8 +35,8 @@ For a demonstration of the availability settings atom, please refer to the video
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/6fd65789f5744227b4ea6d0189d4fc67?sid=544a6afd-2836-4704-aa56-e801cbd93cbc"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -64,7 +64,7 @@ export default function Availability() {
             console.log("Deleted schedule successfully");
           }}
        />
-    <>
+    </>
   )
 }
 ```
@@ -74,8 +74,8 @@ For a demonstration of the availability settings atom with date overrides, pleas
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/aa9ba47cbc284496ac51c26e172c7b12?sid=6d2b5bb3-d2eb-4a95-adb5-c67d863d4e34"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/docs/platform/atoms/booker.mdx b/docs/platform/atoms/booker.mdx
index 0f48062e28..38d81c2643 100644
--- a/docs/platform/atoms/booker.mdx
+++ b/docs/platform/atoms/booker.mdx
@@ -19,7 +19,7 @@ export default function Booker( props : BookerProps ) {
           console.log("booking created successfully");
          }}
       />
-    <>
+    </>
   )
 }
 ```
@@ -29,8 +29,8 @@ For a demonstration of the booker atom, please refer to the video below.
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/73dbb943cef0409c9bc57d5050453a6e?sid=45575c09-4786-486e-99f9-6cf7f4e8db50"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -57,7 +57,7 @@ export default function Booker( props : BookerProps ) {
           console.log("booking created successfully");
          }}
       />
-    <>
+    </>
   )
 }
 ```
@@ -67,8 +67,8 @@ For a demonstration of the booker atom along with calendar overlay, please refer
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/554e9ef9f7874cbe9d179b63cc2c601b?sid=fc185a1c-1fb9-4705-a222-8ccd131bd5b6"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/docs/platform/atoms/calendar-settings.mdx b/docs/platform/atoms/calendar-settings.mdx
index 7e7b9e1fdf..c004c6e6df 100644
--- a/docs/platform/atoms/calendar-settings.mdx
+++ b/docs/platform/atoms/calendar-settings.mdx
@@ -13,7 +13,7 @@ export default function CalendarSettingsComponent() {
   return (
     <>
       <CalendarSettings />
-    <>
+    </>
   )
 }
 ```
@@ -64,7 +64,7 @@ export default function DestinationCalendars() {
   return (
     <>
       <DestinationCalendarSettings classNames="mx-5" statusLoader={loadingStatus} />
-    <>
+    </>
   )
 }
 ```
@@ -91,7 +91,7 @@ export default function SelectedCalendars( props : SelectedCalendarsProps ) {
   return (
     <>
       <SelectedCalendarSettings classNames="mx-5 mb-6" />
-    <>
+    </>
   )
 }
 ```
diff --git a/docs/platform/atoms/event-type.mdx b/docs/platform/atoms/event-type.mdx
index 7ecad17189..0b530377b2 100644
--- a/docs/platform/atoms/event-type.mdx
+++ b/docs/platform/atoms/event-type.mdx
@@ -33,8 +33,8 @@ For a demonstration of the create event type atom, please refer to the video bel
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/b0c5d0599b2c48cdbba288b0b772a676?sid=5a1dbf17-8fc4-41f1-8d77-b36332546989"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -75,8 +75,8 @@ For a demonstration of the create event type atom, please refer to the video bel
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/281c18a1a61c4c44b0bdfd3c88ced8e8?sid=ca68ef1d-eb08-4e23-bd94-9a22a8f7aa7d"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -135,8 +135,8 @@ For a demonstration of the event type settings atom, please refer to the video b
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/2e94c5699dec4fd09d7804d2fd39d71e?sid=04ea09e9-25c3-43cc-be07-33b4b2f32c17"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -209,8 +209,8 @@ Below video shows a demonstration of the limits tab.
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/ac02d393c923413aaa97ab29b43eed48?sid=c130e621-d8e2-4e22-9614-fee97053a194"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -228,8 +228,8 @@ Below video shows a demonstration of the all the options you get in the advanced
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/e0121b51920544eea92251dba99245fa?sid=ac627de7-5673-41b4-aa78-c6c9e439bdb5"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/docs/platform/atoms/google-calendar-connect.mdx b/docs/platform/atoms/google-calendar-connect.mdx
index d24d6f9281..cb9ea8735b 100644
--- a/docs/platform/atoms/google-calendar-connect.mdx
+++ b/docs/platform/atoms/google-calendar-connect.mdx
@@ -11,9 +11,9 @@ import { Connect } from "@calcom/atoms";
 
 export default function Connect() {
   return (
-    <main>
+    <>
       <Connect.GoogleCalendar />
-    </main>
+    </>
   )
 }
 ```
@@ -23,8 +23,8 @@ For a demonstration of the Google calendar connect integration, please refer to
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/dcfcaf8c25754b8daec8fe309fbf7c7c?sid=3181cba5-2e16-4f6e-99de-4408a5109c37"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -42,9 +42,9 @@ import { Connect } from "@calcom/atoms";
 
 export default function Connect() {
   return (
-    <main>
+    <>
       <Connect.GoogleCalendar isMultiCalendar={true} />
-    </main>
+    </>
   )
 }
 ```
@@ -54,8 +54,8 @@ For a demonstration of the Google calendar connect integration for multiple user
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/7a34123b3bd94fbc80809392aab5f712?sid=12bacd7e-62b2-40aa-9fd6-30d69ab22e0a"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/docs/platform/atoms/outlook-calendar-connect.mdx b/docs/platform/atoms/outlook-calendar-connect.mdx
index 8d705d2a38..8ce0ea7490 100644
--- a/docs/platform/atoms/outlook-calendar-connect.mdx
+++ b/docs/platform/atoms/outlook-calendar-connect.mdx
@@ -11,9 +11,9 @@ import { Connect } from "@calcom/atoms";
 
 export default function ConnectCalendar() {
   return (
-    <main>
+    <>
       <Connect.OutlookCalendar />
-    </main>
+    </>
   )
 }
 ```
@@ -23,8 +23,8 @@ For a demonstration of the Google calendar connect integration, please refer to
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/2da4cdfe8d314f74a55e98121dcdb7bd?sid=cdc73356-13c0-49ba-90a3-91d885251457"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -42,9 +42,9 @@ import { Connect } from "@calcom/atoms";
 
 export default function ConnectCalendar() {
   return (
-    <main>
+    <>
       <Connect.OutlookCalendar isMultiCalendar={true} />
-    </main>
+    </>
   )
 }
 ```
@@ -54,8 +54,8 @@ For a demonstration of the Outlook calendar connect integration for multiple use
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/b90c21c2bc9c478f9c28c1ee62bb8568?sid=fe1af433-e6e6-4149-9fe2-d3cdbc7d6ca1"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/docs/platform/atoms/payment-form.mdx b/docs/platform/atoms/payment-form.mdx
index c9b31d1c1e..475b97163a 100644
--- a/docs/platform/atoms/payment-form.mdx
+++ b/docs/platform/atoms/payment-form.mdx
@@ -23,8 +23,8 @@ For a demonstration of the Payment form, please refer to the video below.
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/13cf66446b554d5c9405f9d4fef53f47?sid=d2994785-027e-4de7-937a-3b90fc357182"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -126,8 +126,8 @@ Below video shows a demonstration of how we combined the event types atom and pa
 <p></p>
 
     <iframe
-      width="560"
       height="315"
+      style={{ width: "100%", maxWidth: "560px" }}
       src="https://www.loom.com/embed/0c1bc59da8c34d83b8dfcbd7557f7eaa?sid=058cf5df-1e3a-4fe3-b721-8c5a9eac4f24"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
diff --git a/docs/platform/booking-redirects.mdx b/docs/platform/booking-redirects.mdx
index c13c58ade3..7b756c4b49 100644
--- a/docs/platform/booking-redirects.mdx
+++ b/docs/platform/booking-redirects.mdx
@@ -35,6 +35,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
     return (
         <p>{booking.title}</p>
     )
+};
 ```
 
 An example implementation can be found [here](https://github.com/calcom/cal.com/blob/main/packages/platform/examples/base/src/pages/%5BbookingUid%5D.tsx).