From 8dd430546cd4cfed8942ffb0422f1a7a70604899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Kolankiewicz?= <michal.kolankiewicz@nask.pl>
Date: Thu, 19 Dec 2024 16:45:00 +0100
Subject: [PATCH] fix: styling issues

---
 .../src/components/ActionShowMatchContext.js  | 50 ++++++++++++-------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/mqueryfront/src/components/ActionShowMatchContext.js b/src/mqueryfront/src/components/ActionShowMatchContext.js
index 9518f922..9297d26e 100644
--- a/src/mqueryfront/src/components/ActionShowMatchContext.js
+++ b/src/mqueryfront/src/components/ActionShowMatchContext.js
@@ -25,13 +25,29 @@ const useClickOutside = (ref, callback) => {
 };
 
 function base64ToHex(str64) {
-    return atob(str64)
-        .split("")
-        .map(function (aChar) {
-            return ("0" + aChar.charCodeAt(0).toString(16)).slice(-2);
-        })
-        .join("")
-        .toUpperCase(); // Per your example output
+    return (
+        atob(str64)
+            .split("")
+            .map(function (aChar) {
+                return ("0" + aChar.charCodeAt(0).toString(16)).slice(-2);
+            })
+            .join(" ")
+            .toUpperCase() + " "
+    );
+}
+
+function base64ToUtf8(str64) {
+    return (
+        atob(str64)
+            .split("")
+            .map(function (aChar) {
+                if (32 <= aChar.charCodeAt(0) && aChar.charCodeAt(0) < 127) {
+                    return aChar;
+                }
+                return ".";
+            })
+            .join(" ") + " "
+    );
 }
 
 const ActionShowMatchContext = (props) => {
@@ -66,21 +82,21 @@ const ActionShowMatchContext = (props) => {
                         </td>
                         <td
                             scope="row"
-                            className="text-monospace"
-                            style={{ width: "25%" }}
+                            className="text-monospace text-break"
+                            style={{ width: "45%" }}
                         >
-                            {atob(foundSample["before"])}
-                            {<b>{atob(foundSample["matching"])}</b>}
-                            {atob(foundSample["after"])}
+                            {base64ToHex(foundSample["before"])}
+                            {<b>{base64ToHex(foundSample["matching"])}</b>}
+                            {base64ToHex(foundSample["after"])}
                         </td>
                         <td
                             scope="row"
-                            className="text-monospace"
-                            style={{ width: "50%" }}
+                            className="text-monospace text-break"
+                            style={{ width: "30%" }}
                         >
-                            {base64ToHex(foundSample["before"])}
-                            {<b>{base64ToHex(foundSample["matching"])}</b>}
-                            {base64ToHex(foundSample["after"])}
+                            {base64ToUtf8(foundSample["before"])}
+                            {<b>{base64ToUtf8(foundSample["matching"])}</b>}
+                            {base64ToUtf8(foundSample["after"])}
                         </td>
                     </>
                 );