Fix tutorial video modal centering and Vimeo completion events (#1523)

Author: nystar1

app/assets/stylesheets/components/_kitchen_tutorial_steps.scss

@@ -190,21 +190,24 @@
 
 .tutorial-video-modal {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  inset: 0;
+  z-index: 100;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
   margin: 0;
-  padding: 0;
-  padding-top: 50px;
+  padding: 40px;
   border: none;
-  border-radius: var(--border-radius);
-  width: calc(100vw - 80px);
-  max-width: 1200px;
-  max-height: calc(100vh - 80px);
   background: transparent;
   box-shadow: none;
   overflow: visible;
 
+  &[open] {
+    display: flex;
+  }
+
   &::backdrop {
     background: rgb(0 0 0 / 0.8);
   }
@@ -213,8 +216,8 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 100%;
-    height: 100%;
+    width: min(1200px, 100%);
+    max-height: 100%;
   }
 
   &__close {

app/javascript/controllers/tutorial_video_modal_controller.js

@@ -13,7 +13,6 @@ export default class extends Controller {
 
     const videoUrl = event.params.videoUrl;
     if (videoUrl) {
-      this.iframeTarget.onload = () => this.subscribeToVimeoEvents();
       this.iframeTarget.src = videoUrl;
     }
 
@@ -60,7 +59,9 @@ export default class extends Controller {
     try {
       const data =
         typeof event.data === "string" ? JSON.parse(event.data) : event.data;
-      if (data.event === "play") {
+      if (data.event === "ready") {
+        this.subscribeToVimeoEvents();
+      } else if (data.event === "play") {
         this.markComplete();
       }
     } catch (e) {