replace youtube prompt with dialog, responsive embed styles, width fix

[moehdotdev]

replace youtube prompt with dialog + responsive embed styles + note width fix

what changed

slash-command.tsx youtube embed dialog
replaced the browser prompt() call with a proper YoutubeDialog component. the dialog validates the url with zod before allowing submission, shows inline error messages, and supports enter-to-submit. it's mounted imperatively with createRoot so it works outside of the react tree where the slash command runs. the embed button stays disabled until the url passes validation.

globals.css responsive youtube embed styles
added [data-youtube-video] styles so embedded youtube iframes are always full width, use aspect-ratio: 16/9, have rounded corners, and a subtle border. slightly less rounded on mobile (8px vs 12px).

NotePageClient.tsx responsive note width
changed the fixed-width note layout from a hard w-[900px] (which overflowed on smaller screens) to Desktop:w-[900px] w-full px-4. now it's full width with padding on anything below the desktop breakpoint.

HomeClientLayout.tsx minor cleanup
tightened the header padding from px-5 to px-4 and reformatted the memo wrapper to be more compact.

prompt() is a browser-blocking native dialog with no styling, no validation, and no undo. the new dialog integrates with the rest of the ui and prevents bad urls from being embedded. the note width fix prevents horizontal scroll on tablets.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
notevo	Ready	Preview, Comment	Apr 15, 2026 6:54pm