Fixed video NFT asset dimensions and vertically centered ALL NFT art (#20666)

explorer/src/components/account/MetaplexNFTHeader.tsx

@@ -17,7 +17,7 @@ export function NFTHeader({
   const metadata = nftData.metadata;
   return (
     <div className="row align-items-begin">
-      <div className="col-auto ml-2">
+      <div className="col-auto ml-2 d-flex align-items-center">
         <ArtContent metadata={metadata} pubkey={address} />
       </div>
 

explorer/src/metaplex/Art/Art.tsx

@@ -127,13 +127,13 @@ const VideoArtContent = ({
           streamRef={(e: any) => playerRef(e)}
           src={likelyVideo.replace("https://watch.videodelivery.net/", "")}
           loop={true}
-          height={150}
-          width={150}
+          height={180}
+          width={320}
           controls={false}
           style={{ borderRadius: 12 }}
           videoDimensions={{
-            videoHeight: 150,
-            videoWidth: 150,
+            videoWidth: 320,
+            videoHeight: 180,
           }}
           autoplay={true}
           muted={true}
@@ -146,7 +146,7 @@ const VideoArtContent = ({
         muted={true}
         controls={true}
         controlsList="nodownload"
-        style={{ borderRadius: 12 }}
+        style={{ borderRadius: 12, width: 320, height: 180 }}
         loop={true}
         poster={uri}
       >
@@ -186,7 +186,7 @@ const HTMLContent = ({
         frameBorder="0"
         src={htmlURL}
         className={`${loaded ? "d-block" : "d-none"}`}
-        style={{ width: 150, borderRadius: 12 }}
+        style={{ width: 320, height: 180, borderRadius: 12 }}
         onLoad={() => {
           setLoaded(true);
         }}

explorer/src/scss/_solana.scss

@@ -427,5 +427,4 @@ p.updated-time {
   align-items: center;
   justify-content: center;
   width: 150px;
-  margin-top: 20px;
 }