fix: Update Arcade embed aspect ratio (#12923)

config/markdown_embeds.yml

@@ -52,10 +52,25 @@ mp4:
       Your browser does not support the video tag.
     </video>
 
+arcade_tab:
+  regex: 'https?://(?:www\.)?app\.arcade\.software/share/(?<video_id>[^&/?]+)\?(?:[^&#]*&)*embed_mobile=tab(?:[&#?][^ ]*)?'
+  template: |
+    <div style="position: relative; padding-bottom: calc(62.793% + 41px); height: 0px; width: 100%;">
+      <iframe
+        src="https://app.arcade.software/embed/%{video_id}?embed&embed_mobile=tab"
+        frameborder="0"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen
+        allow="fullscreen"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </iframe>
+    </div>
+
 arcade:
   regex: 'https?://(?:www\.)?app\.arcade\.software/share/(?<video_id>[^&/]+)'
   template: |
-    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+    <div style="position: relative; padding-bottom: calc(62.793% + 41px); height: 0px; width: 100%;">
       <iframe
         src="https://app.arcade.software/embed/%{video_id}"
         frameborder="0"

spec/config/markdown_embeds_spec.rb

@@ -21,7 +21,7 @@ describe 'Markdown Embeds Configuration' do
     end
 
     it 'contains expected embed types' do
-      expected_types = %w[youtube loom vimeo mp4 arcade wistia bunny codepen github_gist]
+      expected_types = %w[youtube loom vimeo mp4 arcade_tab arcade wistia bunny codepen github_gist]
       expect(config.keys).to match_array(expected_types)
     end
   end
@@ -50,6 +50,12 @@ describe 'Markdown Embeds Configuration' do
           { url: 'https://app.arcade.software/share/arcade123', expected: { 'video_id' => 'arcade123' } },
           { url: 'https://www.app.arcade.software/share/demo456', expected: { 'video_id' => 'demo456' } }
         ],
+        'arcade_tab' => [
+          { url: 'https://app.arcade.software/share/arcade789?embed_mobile=tab', expected: { 'video_id' => 'arcade789' } },
+          { url: 'https://app.arcade.software/share/demo789?foo=bar&embed_mobile=tab', expected: { 'video_id' => 'demo789' } },
+          { url: 'https://app.arcade.software/share/demo-with-query?foo=bar&embed_mobile=tab?user_id=1',
+            expected: { 'video_id' => 'demo-with-query' } }
+        ],
         'wistia' => [
           { url: 'https://chatwoot.wistia.com/medias/kjwjeq6f9i', expected: { 'video_id' => 'kjwjeq6f9i' } },
           { url: 'https://www.company.wistia.com/medias/abc123def', expected: { 'video_id' => 'abc123def' } }

spec/lib/custom_markdown_renderer_spec.rb

@@ -138,7 +138,28 @@ describe CustomMarkdownRenderer do
 
       it 'wraps iframe in responsive container' do
         output = render_markdown_link(arcade_url)
-        expect(output).to include('position: relative; padding-bottom: 62.5%; height: 0;')
+        expect(output).to include('position: relative; padding-bottom: calc(62.793% + 41px); height: 0px; width: 100%;')
+        expect(output).to include('position: absolute; top: 0; left: 0; width: 100%; height: 100%;')
+      end
+    end
+
+    context 'when link is an Arcade tab URL' do
+      let(:arcade_tab_url) { 'https://app.arcade.software/share/ARCADE_TAB_ID?embed_mobile=tab' }
+
+      it 'renders an iframe with Arcade tab embed code' do
+        output = render_markdown_link(arcade_tab_url)
+        expect(output).to include('src="https://app.arcade.software/embed/ARCADE_TAB_ID?embed&embed_mobile=tab"')
+      end
+
+      it 'supports additional query params after embed_mobile' do
+        url = 'https://app.arcade.software/share/ARCADE_TAB_ID?foo=bar&embed_mobile=tab?user_id=1'
+        output = render_markdown_link(url)
+        expect(output).to include('src="https://app.arcade.software/embed/ARCADE_TAB_ID?embed&embed_mobile=tab"')
+      end
+
+      it 'wraps iframe in responsive container' do
+        output = render_markdown_link(arcade_tab_url)
+        expect(output).to include('position: relative; padding-bottom: calc(62.793% + 41px); height: 0px; width: 100%;')
         expect(output).to include('position: absolute; top: 0; left: 0; width: 100%; height: 100%;')
       end
     end