docs: Fix Arcade sizing in docs (#38472)

Author: Tim Roes

docs/readme.md

@@ -18,7 +18,7 @@ There are three major components to know in Airbyte:
 
 Airbyte is suitable for a wide range of data integration use cases, including AI data infrastructure and EL(T) workloads. Airbyte is also [embeddable](https://airbyte.com/product/powered-by-airbyte) within your own application or platform to power your product.
 
-<Arcade id="0k75Pa9c9EvrJb8zFsuU" title="Airbyte Demo" />
+<Arcade id="0k75Pa9c9EvrJb8zFsuU" title="Airbyte Demo" paddingBottom="calc(61.416666666666664% + 41px)" />
 
 ## For Airbyte Cloud users
 

docs/using-airbyte/getting-started/add-a-source.md

@@ -6,7 +6,7 @@ products: all
 
 Setting up a new source in Airbyte is a quick and simple process! When viewing the Airbyte UI, you'll see the main navigation bar on the left side of your screen. Click the **Sources** tab to bring up a list of all available sources.
 
-<Arcade id="WjbChISa931Hc55yx4cb" title="Getting Started (Source)" />
+<Arcade id="WjbChISa931Hc55yx4cb" title="Getting Started (Source)" paddingBottom="calc(61.42578125% + 41px)" />
 
 You can use the provided search bar, or simply scroll down the list to find the source you want to replicate data from. Let's use a demo source, Faker, as an example. Clicking on the **Sample Data (Faker)** card will bring us to its setup page.
 

docs/using-airbyte/getting-started/set-up-a-connection.md

@@ -17,7 +17,7 @@ Once you've chosen your source and destination you can configure the connection.
 
 Most users select "Mirror Source", which will simply copy the data from the source to the destination where you'll see one row in the destination for each row in the source. If you prefer to Append Historical Changes or take a Full Snapshot with each sync, you can optionally select those options, but keep in mind those will create duplicate records in your destination. The sync mode we choose for all the enabled streams will reflect your selection here.
 
-<Arcade id="9E7CQiWoHtFvB12Yd5zN" title="Getting Started (Select Streams)" />
+<Arcade id="9E7CQiWoHtFvB12Yd5zN" title="Getting Started (Select Streams)" paddingBottom="calc(61.37931034482759% + 41px)" />
 
 Next, you can toggle which streams you want to replicate. Our test data consists of three streams, which we've enabled and set to `Incremental - Append + Deduped` sync mode.
 
@@ -30,7 +30,7 @@ You can also select individual fields to sync on this page. Expand the fields av
 
 Click **Next** to complete your stream setup and move to the connection configuration. This is where you'll set up how often your data will sync and where it will live in the destination. For this demo, we'll set the connection to run at 8 AM every day and sync the connection to a custom namespace with a stream prefix.
 
-<Arcade id="KdySgaUBwroRxkYLnemX" title="Getting Started (Configure Connection)" />
+<Arcade id="KdySgaUBwroRxkYLnemX" title="Getting Started (Configure Connection)" paddingBottom="calc(61.37931034482759% + 41px)" />
 
 :::note
 To ensure your data is synced to the correct place, see our examples for [Destination Namespace](/using-airbyte/core-concepts/namespaces.md)

docusaurus/src/components/Arcade.jsx

@@ -1,6 +1,6 @@
 export const Arcade = (props) => {
     return (
-        <div style={{ position: "relative", marginBottom: "1em", paddingBottom: "calc(56.73828125% + 41px)", height: 0}}>
+        <div style={{ position: "relative", marginBottom: "1em", paddingBottom: props.paddingBottom, height: 0}}>
             <iframe src={`https://demo.arcade.software/${props.id}?embed`} title={props.title} frameborder="0" loading="lazy" allowFullScreen style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", colorScheme: "light"}} />
         </div>
     );