Make embeds larger

src/components/embed-modal.css

@@ -22,6 +22,10 @@
     iframe {
       pointer-events: auto;
       max-width: 100%;
+      max-height: 100%;
+      width: max(var(--width), 480px);
+      height: auto;
+      aspect-ratio: var(--aspect-ratio);
     }
   }
 }

src/components/embed-modal.jsx

@@ -2,7 +2,7 @@ import './embed-modal.css';
 
 import Icon from './icon';
 
-function EmbedModal({ html, url, onClose = () => {} }) {
+function EmbedModal({ html, url, width, height, onClose = () => {} }) {
   return (
     <div class="embed-modal-container">
       <div class="top-controls">
@@ -20,7 +20,15 @@ function EmbedModal({ html, url, onClose = () => {} }) {
           </a>
         )}
       </div>
-      <div class="embed-content" dangerouslySetInnerHTML={{ __html: html }} />
+      <div
+        class="embed-content"
+        dangerouslySetInnerHTML={{ __html: html }}
+        style={{
+          '--width': width + 'px',
+          '--height': height + 'px',
+          '--aspect-ratio': `${width}/${height}`,
+        }}
+      />
     </div>
   );
 }

src/components/modals.jsx

@@ -210,6 +210,8 @@ export default function Modals() {
           <EmbedModal
             html={snapStates.showEmbedModal.html}
             url={snapStates.showEmbedModal.url}
+            width={snapStates.showEmbedModal.width}
+            height={snapStates.showEmbedModal.height}
             onClose={() => {
               states.showEmbedModal = false;
             }}

src/components/status.jsx

@@ -2103,6 +2103,8 @@ function Card({ card, selfReferential, instance }) {
         states.showEmbedModal = {
           html,
           url: url || embedUrl,
+          width,
+          height,
         };
       }
     },