From 77597a0554ac0b107cc3e38d44ae33c9b6506f4e Mon Sep 17 00:00:00 2001
From: Hamed Osama <hamedosama19@gmail.com>
Date: Mon, 23 Jan 2023 00:16:51 +0200
Subject: [PATCH 1/2] #UI: solve text wrpping in unseal page

---
 app/unseal/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/unseal/page.tsx b/app/unseal/page.tsx
index 0b63e6b..fcf3219 100644
--- a/app/unseal/page.tsx
+++ b/app/unseal/page.tsx
@@ -74,7 +74,7 @@ export default function Unseal() {
               )}
             </div>
           ) : null}
-          <pre className="px-4 py-3 mt-8 font-mono text-left bg-transparent border rounded border-zinc-600 focus:border-zinc-100/80 focus:ring-0 sm:text-sm text-zinc-100">
+          <pre className="px-4 py-3 mt-8 font-mono text-left bg-transparent border rounded border-zinc-600 focus:border-zinc-100/80 focus:ring-0 sm:text-sm text-zinc-100 ">
             <div className="flex items-start px-1 text-sm">
               <div aria-hidden="true" className="pr-4 font-mono border-r select-none border-zinc-300/5 text-zinc-700">
                 {Array.from({
@@ -88,7 +88,7 @@ export default function Unseal() {
               </div>
               <div>
                 <pre className="flex overflow-x-auto">
-                  <code className="px-4 text-left">{text}</code>
+                  <code className="px-4 text-left whitespace-pre-wrap">{text}</code>
                 </pre>
               </div>
             </div>

From e3338fa22524cd83f9a03f9e243d38fbe79a4123 Mon Sep 17 00:00:00 2001
From: Hamed Osama <hamedosama19@gmail.com>
Date: Mon, 23 Jan 2023 23:18:51 +0200
Subject: [PATCH 2/2] #UI: solve text wrapping in unseal page v2

---
 app/globals.css     | 6 ++++++
 app/unseal/page.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index b764a11..65d4eaa 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,4 +12,10 @@
   input[type="file"] {
     @apply appearance-none;
   }
+}
+
+.break { 
+  -webkit-overflow-wrap : anywhere ;
+  -moz-overflow-wrap : anywhere ;
+  overflow-wrap: anywhere;
 }
\ No newline at end of file
diff --git a/app/unseal/page.tsx b/app/unseal/page.tsx
index fcf3219..4ce9887 100644
--- a/app/unseal/page.tsx
+++ b/app/unseal/page.tsx
@@ -74,7 +74,7 @@ export default function Unseal() {
               )}
             </div>
           ) : null}
-          <pre className="px-4 py-3 mt-8 font-mono text-left bg-transparent border rounded border-zinc-600 focus:border-zinc-100/80 focus:ring-0 sm:text-sm text-zinc-100 ">
+          <pre className="px-4 py-3 mt-8 font-mono text-left bg-transparent border rounded border-zinc-600 focus:border-zinc-100/80 focus:ring-0 sm:text-sm text-zinc-100">
             <div className="flex items-start px-1 text-sm">
               <div aria-hidden="true" className="pr-4 font-mono border-r select-none border-zinc-300/5 text-zinc-700">
                 {Array.from({
@@ -88,7 +88,7 @@ export default function Unseal() {
               </div>
               <div>
                 <pre className="flex overflow-x-auto">
-                  <code className="px-4 text-left whitespace-pre-wrap">{text}</code>
+                  <code className="px-4 text-left whitespace-pre-wrap break">{text}</code>
                 </pre>
               </div>
             </div>