addressed the comments on PR

Author: Ahtesham Quraish

frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx

@@ -48,6 +48,9 @@ const StyledEditorContent = styled(EditorContent)<{ readOnly: boolean }>(
     backgroundColor: theme.custom.colors.white,
     borderRadius: "10px",
     margin: "20px auto",
+    ".tiptap.ProseMirror.simple-editor": {
+      padding: "3rem 3rem 5vh",
+    },
     ...(readOnly
       ? {
           maxWidth: "1000px",

frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss

@@ -89,7 +89,7 @@
 .media-container {
   position: relative;
   width: 100%;
-  height: 100vh; // ✅ add height here
+  aspect-ratio: 16 / 9;
   overflow: hidden;
 }
 

frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/MediaUrlInputDialog.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useCallback } from "react"
+import NiceModal, { muiDialogV5 } from "@ebay/nice-modal-react"
+import { TextField, Alert } from "@mitodl/smoot-design"
+import { FormDialog } from "ol-components"
+
+const MediaUrlInputDialog = NiceModal.create(() => {
+  const modal = NiceModal.useModal()
+  const [url, setUrl] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = (e?: any) => {
+    e?.preventDefault()
+
+    if (!url.trim()) {
+      setError("URL is required")
+      return
+    }
+    modal.resolve(url)
+    modal.hide()
+  }
+
+  const handleReset = useCallback(() => {
+    setUrl("")
+    setError(null)
+  }, [setUrl, setError])
+
+  return (
+    <FormDialog
+      {...muiDialogV5(modal)}
+      title="Embed Media"
+      confirmText="Insert"
+      onSubmit={handleSubmit}
+      onReset={handleReset}
+      noValidate
+      fullWidth
+    >
+      <TextField
+        name="mediaUrl"
+        label="Media URL"
+        placeholder="https://youtube.com/..."
+        value={url}
+        error={!!error}
+        errorText={error ?? ""}
+        onChange={(e: any) => {
+          setError(null)
+          setUrl(e.target.value)
+        }}
+        fullWidth
+      />
+
+      {error && <Alert severity="error">{error}</Alert>}
+    </FormDialog>
+  )
+})
+
+export default MediaUrlInputDialog

frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts

@@ -15,13 +15,25 @@ export function convertToEmbedUrl(url: string): string {
     return videoId ? `https://www.youtube.com/embed/${videoId}` : url
   }
 
-  // --- YOUTUBE SHORT ---
+  // --- YOUTUBE SHORTS ---
+  if (hostname === "youtube.com" && parsed.pathname.startsWith("/shorts/")) {
+    const id = parsed.pathname.split("/shorts/")[1]
+    return id ? `https://www.youtube.com/embed/${id}` : url
+  }
+
+  // --- YOUTUBE SHORT youtu.be/shorts/??? (rare but possible) ---
+  if (hostname === "youtu.be" && parsed.pathname.startsWith("/shorts/")) {
+    const id = parsed.pathname.split("/shorts/")[1]
+    return id ? `https://www.youtube.com/embed/${id}` : url
+  }
+
+  // --- YOUTUBE SHORT youtu.be/VIDEO_ID ---
   if (hostname === "youtu.be") {
     const id = parsed.pathname.slice(1)
     return id ? `https://www.youtube.com/embed/${id}` : url
   }
 
-  // --- YOUTUBE /embed or other formats keep as is ---
+  // --- YOUTUBE EMBED (leave as-is) ---
   if (hostname === "youtube.com" && parsed.pathname.startsWith("/embed/")) {
     return url
   }

frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts

@@ -2,6 +2,8 @@ import { useCallback, useMemo } from "react"
 import type { Editor } from "@tiptap/react"
 import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
 import { convertToEmbedUrl } from "./lib"
+import NiceModal from "@ebay/nice-modal-react"
+import MediaUrlInputDialog from "./MediaUrlInputDialog"
 import { Icon } from "./Icon"
 
 export const MEDIA_EMBED_SHORTCUT_KEY = "Mod+Shift+E"
@@ -14,11 +16,16 @@ export function useMediaEmbed(editor?: Editor | null) {
 
   const label = "Embed Media"
 
-  const handleEmbed = useCallback(() => {
-    const url = prompt("Enter a media URL (YouTube, Vimeo, etc)")
-    if (!url) return
+  const handleEmbed = useCallback(async () => {
+    try {
+      const url: string = await NiceModal.show(MediaUrlInputDialog)
+      console.log("URL received from modal:", url)
+      if (!url) return
 
-    resolved?.commands.insertMedia(convertToEmbedUrl(url))
+      resolved?.commands.insertMedia(convertToEmbedUrl(url))
+    } catch {
+      // modal was closed / cancelled
+    }
   }, [resolved])
 
   return {