From d363ec98a90f8246d729f9185c314ecfce839bd8 Mon Sep 17 00:00:00 2001
From: Will Roeder <roederw@outlook.com>
Date: Sat, 16 Oct 2021 19:19:08 -0700
Subject: [PATCH] Added better layout suppport in MetaplexNFTHeader for mobile
 devices (#20705)

---
 explorer/src/components/account/MetaplexNFTHeader.tsx | 9 ++++-----
 explorer/src/scss/_solana.scss                        | 6 ++++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/explorer/src/components/account/MetaplexNFTHeader.tsx b/explorer/src/components/account/MetaplexNFTHeader.tsx
index c3d643e6f..93dd88362 100644
--- a/explorer/src/components/account/MetaplexNFTHeader.tsx
+++ b/explorer/src/components/account/MetaplexNFTHeader.tsx
@@ -16,22 +16,21 @@ export function NFTHeader({
 }) {
   const metadata = nftData.metadata;
   return (
-    <div className="row align-items-begin">
+    <div className="row">
       <div className="col-auto ml-2 d-flex align-items-center">
         <ArtContent metadata={metadata} pubkey={address} />
       </div>
-
-      <div className="col mb-3 ml-n3 ml-md-n2 mt-3">
+      <div className="col mb-3 ml-0.5 mt-3">
         {<h6 className="header-pretitle ml-1">Metaplex NFT</h6>}
         <div className="d-flex align-items-center">
-          <h2 className="header-title ml-1 align-items-center">
+          <h2 className="header-title ml-1 align-items-center no-overflow-with-ellipsis">
             {metadata.data.name !== ""
               ? metadata.data.name
               : "No NFT name was found"}
           </h2>
           {getEditionPill(nftData.editionInfo)}
         </div>
-        <h4 className="header-pretitle ml-1 mt-1">
+        <h4 className="header-pretitle ml-1 mt-1 no-overflow-with-ellipsis">
           {metadata.data.symbol !== ""
             ? metadata.data.symbol
             : "No Symbol was found"}
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index 5c202bb97..51cfcb55a 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -428,3 +428,9 @@ p.updated-time {
   justify-content: center;
   width: 150px;
 }
+
+.no-overflow-with-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}