From 10c0cb82002f74e8f38847de57f9079a914d01cc Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Wed, 12 Nov 2025 21:31:26 +0100
Subject: [PATCH] fixed video display on mobile

---
 src/components/Content/index.tsx                    | 13 +++++++------
 .../Note/AsciidocArticle/AsciidocArticle.tsx        |  4 ++--
 .../Note/MarkdownArticle/MarkdownArticle.tsx        |  4 ++--
 src/components/VideoPlayer/index.tsx                |  4 ++--
 src/lib/nostr-parser.tsx                            |  2 +-
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index 6727b1e..7e0e312 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -329,12 +329,13 @@ export default function Content({
       
       {/* Render videos from tags that don't appear in content */}
       {videosFromTags.map((video) => (
-        <MediaPlayer
-          key={`tag-video-${video.url}`}
-          src={video.url}
-          className="mt-2"
-          mustLoad={mustLoadMedia}
-        />
+        <div key={`tag-video-${video.url}`} className="mt-2 w-full max-w-full overflow-hidden">
+          <MediaPlayer
+            src={video.url}
+            className="w-full max-w-full"
+            mustLoad={mustLoadMedia}
+          />
+        </div>
       ))}
       
       {/* Render audio from tags that don't appear in content */}
diff --git a/src/components/Note/AsciidocArticle/AsciidocArticle.tsx b/src/components/Note/AsciidocArticle/AsciidocArticle.tsx
index 7ea3e7a..b78b80b 100644
--- a/src/components/Note/AsciidocArticle/AsciidocArticle.tsx
+++ b/src/components/Note/AsciidocArticle/AsciidocArticle.tsx
@@ -1325,10 +1325,10 @@ export default function AsciidocArticle({
                 )
               } else if (media.type === 'video' || media.type === 'audio') {
                 return (
-                  <div key={`tag-media-${cleaned}`} className="my-2">
+                  <div key={`tag-media-${cleaned}`} className="my-2 w-full max-w-full overflow-hidden">
                     <MediaPlayer
                       src={media.url}
-                      className="max-w-[400px]"
+                      className="max-w-full sm:max-w-[400px] w-full"
                       mustLoad={true}
                       poster={media.poster}
                     />
diff --git a/src/components/Note/MarkdownArticle/MarkdownArticle.tsx b/src/components/Note/MarkdownArticle/MarkdownArticle.tsx
index fb437f0..2dd1025 100644
--- a/src/components/Note/MarkdownArticle/MarkdownArticle.tsx
+++ b/src/components/Note/MarkdownArticle/MarkdownArticle.tsx
@@ -3087,10 +3087,10 @@ export default function MarkdownArticle({
                 )
               } else if (media.type === 'video' || media.type === 'audio') {
                 return (
-                  <div key={`tag-media-${cleaned}`} className="my-2">
+                  <div key={`tag-media-${cleaned}`} className="my-2 w-full max-w-full overflow-hidden">
                     <MediaPlayer
                       src={media.url}
-                      className="max-w-[400px]"
+                      className="max-w-full sm:max-w-[400px] w-full"
                       mustLoad={true}
                       poster={media.poster}
                     />
diff --git a/src/components/VideoPlayer/index.tsx b/src/components/VideoPlayer/index.tsx
index 3196a1f..41f2414 100644
--- a/src/components/VideoPlayer/index.tsx
+++ b/src/components/VideoPlayer/index.tsx
@@ -57,12 +57,12 @@ export default function VideoPlayer({ src, className, poster }: { src: string; c
         setError(true)
       }}
     >
-      <div ref={containerRef}>
+      <div ref={containerRef} className="w-full max-w-full overflow-hidden">
         <video
           ref={videoRef}
           controls
           playsInline
-          className={cn('rounded-lg max-h-[80vh] sm:max-h-[60vh] border', className)}
+          className={cn('rounded-lg max-h-[80vh] sm:max-h-[60vh] border w-full h-auto max-w-full', className)}
           src={src}
           poster={poster}
           onClick={(e) => e.stopPropagation()}
diff --git a/src/lib/nostr-parser.tsx b/src/lib/nostr-parser.tsx
index 2796783..b1b7afd 100644
--- a/src/lib/nostr-parser.tsx
+++ b/src/lib/nostr-parser.tsx
@@ -411,7 +411,7 @@ export function renderNostrContent(parsedContent: ParsedNostrContent, className?
               key={index}
               src={element.mediaUrl}
               controls
-              className="max-w-[400px] w-full h-auto rounded-lg my-2 block"
+              className="max-w-full sm:max-w-[400px] w-full h-auto rounded-lg my-2 block"
               preload="metadata"
               onError={(e) => {
                 // Fallback to text if video fails to load