From 97fa99aa3bebf16d40e0e546d3da54d191cc3843 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Wed, 16 Oct 2024 17:10:42 -0500
Subject: [PATCH] Fix video details layout

---
 .../content/documents/DocumentDetails.js      |  6 +--
 src/components/content/videos/VideoDetails.js | 46 ++++++++++---------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/content/documents/DocumentDetails.js b/src/components/content/documents/DocumentDetails.js
index 26e558f..7dc1f18 100644
--- a/src/components/content/documents/DocumentDetails.js
+++ b/src/components/content/documents/DocumentDetails.js
@@ -148,14 +148,14 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
                         <p key={index}>{line}</p>
                     ))}
                     {processedEvent?.additionalLinks && processedEvent?.additionalLinks.length > 0 && (
-                        <>
+                        <div className="my-4">
                             <p>Additional Links:</p>
                             {processedEvent.additionalLinks.map((link, index) => (
                                 <a className="text-blue-500 hover:underline hover:text-blue-600" key={index} href={link} target="_blank" rel="noopener noreferrer">
                                     {link}
                                 </a>
                             ))}
-                        </>
+                        </div>
                     )}
                     <div className='flex items-center justify-between'>
                         <div className='flex items-center'>
@@ -183,7 +183,7 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
                         {renderPaymentMessage()}
                         {authorView ? (
                             <div className='flex space-x-2 mt-4 sm:mt-0'>
-                                <GenericButton onClick={() => router.push(`/details/${processedEvent.d}/edit`)} label="Edit" severity='warning' outlined />
+                                <GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
                                 <GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
                                 <GenericButton
                                     tooltip={isMobileView ? null : "View Nostr Note"}
diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index 009a0a0..d24152e 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -132,7 +132,14 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
             <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
                 <div className={`w-full flex flex-col items-start justify-start mt-2 px-2`}>
                     <div className="flex flex-col items-start gap-2 w-full">
-                        <h1 className='text-4xl'>{title}</h1>
+                        <div className="flex flex-row items-center justify-between gap-2 w-full">
+                            <h1 className='text-4xl flex-grow'>{title}</h1>
+                            <ZapDisplay
+                                zapAmount={zapAmount}
+                                event={processedEvent}
+                                zapsLoading={zapsLoading && zapAmount === 0}
+                            />
+                        </div>
                         <div className="flex flex-row items-center gap-2 w-full">
                             {topics && topics.length > 0 && (
                                 topics.map((topic, index) => (
@@ -148,36 +155,31 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
                                 <p key={index}>{line}</p>
                             ))}
                             {processedEvent?.additionalLinks && processedEvent?.additionalLinks.length > 0 && (
-                                <>
+                                <div className="my-4">
                                     <p>Additional Links:</p>
                                     {processedEvent.additionalLinks.map((link, index) => (
                                         <a className="text-blue-500 hover:underline hover:text-blue-600" key={index} href={link} target="_blank" rel="noopener noreferrer">
                                             {link}
                                         </a>
                                     ))}
-                                </>
+                                </div>
                             )}
                         </div>
-                        <div className='flex items-center'>
-                            <Image
-                                alt="avatar image"
-                                src={returnImageProxy(author?.avatar, author?.username)}
-                                width={50}
-                                height={50}
-                                className="rounded-full mr-4"
-                            />
-                            <p className='text-lg text-white'>
-                                By{' '}
-                                <a rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'>
-                                    {author?.username}
-                                </a>
-                            </p>
-                        </div>
-                        <ZapDisplay
-                            zapAmount={zapAmount}
-                            event={processedEvent}
-                            zapsLoading={zapsLoading && zapAmount === 0}
+                    </div>
+                    <div className='flex items-center'>
+                        <Image
+                            alt="avatar image"
+                            src={returnImageProxy(author?.avatar, author?.username)}
+                            width={50}
+                            height={50}
+                            className="rounded-full mr-4"
                         />
+                        <p className='text-lg text-white'>
+                            By{' '}
+                            <a rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'>
+                                {author?.username}
+                            </a>
+                        </p>
                     </div>
                 </div>
                 <div className="w-full flex flex-row justify-end mt-4">