From b9fb595db28787faf5d0e1784f909380a0cb6215 Mon Sep 17 00:00:00 2001
From: Josh <josh.hundley@gmail.com>
Date: Wed, 17 Feb 2021 12:12:49 -0800
Subject: [PATCH] explorer: remove line breaks from wrapped data (#15379)

---
 explorer/src/components/instruction/RawDetails.tsx | 5 ++---
 explorer/src/scss/_solana.scss                     | 9 +++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/explorer/src/components/instruction/RawDetails.tsx b/explorer/src/components/instruction/RawDetails.tsx
index 88bd9c3815..a40ee847d6 100644
--- a/explorer/src/components/instruction/RawDetails.tsx
+++ b/explorer/src/components/instruction/RawDetails.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { TransactionInstruction } from "@solana/web3.js";
 import { Address } from "components/common/Address";
-import { wrap } from "utils";
 
 export function RawDetails({ ix }: { ix: TransactionInstruction }) {
-  const data = wrap(ix.data.toString("hex"), 50);
+  const data = ix.data.toString("hex");
   return (
     <>
       {ix.keys.map(({ pubkey, isSigner, isWritable }, keyIndex) => (
@@ -27,7 +26,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
       <tr>
         <td>Instruction Data (Hex)</td>
         <td className="text-lg-right">
-          <pre className="d-inline-block text-left mb-0">{data}</pre>
+          <pre className="d-inline-block text-left mb-0 data-wrap">{data}</pre>
         </td>
       </tr>
     </>
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index ee321d252a..09c0f194ed 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -331,3 +331,12 @@ div.inner-cards {
   background: red;
   border: 1px solid red;
 }
+
+pre.data-wrap {
+  max-width: 23rem;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}