From 4cc17ec6a738e8a077c2c36a42fb0353c86c8273 Mon Sep 17 00:00:00 2001 From: Justin Starry Date: Mon, 13 Sep 2021 17:07:13 -0500 Subject: [PATCH] explorer: Fix wrapping for pretty hex data (#19835) --- explorer/src/components/common/HexData.tsx | 24 +++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/explorer/src/components/common/HexData.tsx b/explorer/src/components/common/HexData.tsx index c0859b5a0..054fc4072 100644 --- a/explorer/src/components/common/HexData.tsx +++ b/explorer/src/components/common/HexData.tsx @@ -13,20 +13,34 @@ export function HexData({ raw }: { raw: Buffer }) { chunks.push(hexString.slice(i, i + 2)); } - const spans: ReactNode[] = []; - for (let i = 0; i < chunks.length; i += 4) { - const color = i % 8 === 0 ? "text-white" : "text-gray-500"; + const SPAN_SIZE = 4; + const ROW_SIZE = 4 * SPAN_SIZE; + + const divs: ReactNode[] = []; + let spans: ReactNode[] = []; + for (let i = 0; i < chunks.length; i += SPAN_SIZE) { + const color = i % (2 * SPAN_SIZE) === 0 ? "text-white" : "text-gray-500"; spans.push( - {chunks.slice(i, i + 4).join(" ")}  + {chunks.slice(i, i + SPAN_SIZE).join(" ")}  ); + + if ( + i % ROW_SIZE === ROW_SIZE - SPAN_SIZE || + i >= chunks.length - SPAN_SIZE + ) { + divs.push(
{spans}
); + + // clear spans + spans = []; + } } function Content() { return ( -
{spans}
+
{divs}
); }