From ffc635ef26b310d76a9420ab6734491949a4236a Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Mon, 11 Mar 2024 22:14:24 +0100
Subject: [PATCH] fix: better ui, word wrap

---
 src/components/TextareaCopyable.vue         | 3 ++-
 src/tools/gzip-converter/gzip-converter.vue | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue
index 8b0aae61..1bf3b5ff 100644
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -16,6 +16,7 @@ const props = withDefaults(
     language?: string
     copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
     copyMessage?: string
+    wordWrap?: boolean
   }>(),
   {
     followHeightOf: null,
@@ -47,7 +48,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
         :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
       >
         <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
         </n-config-provider>
       </n-scrollbar>
       <div absolute right-10px top-10px>
diff --git a/src/tools/gzip-converter/gzip-converter.vue b/src/tools/gzip-converter/gzip-converter.vue
index 43f99923..efc24d7a 100644
--- a/src/tools/gzip-converter/gzip-converter.vue
+++ b/src/tools/gzip-converter/gzip-converter.vue
@@ -33,6 +33,8 @@ const compressedZlibOutput = computed(() => withDefaultOnError(() => Base64.from
         <h3>GZIP compressed string</h3>
         <TextareaCopyable
           :value="compressedGzipOutput"
+          :word-wrap="true"
+          multiline
           placeholder="The GZip compressed version of your string will be here"
           mb-5
         />
@@ -42,6 +44,8 @@ const compressedZlibOutput = computed(() => withDefaultOnError(() => Base64.from
         <h3>Zlib compressed string</h3>
         <TextareaCopyable
           :value="compressedZlibOutput"
+          :word-wrap="true"
+          multiline
           placeholder="The Zlib compressed version of your string will be here"
           mb-5
         />
@@ -51,6 +55,8 @@ const compressedZlibOutput = computed(() => withDefaultOnError(() => Base64.from
         <h3>Deflate compressed string</h3>
         <TextareaCopyable
           :value="compressedDeflateOutput"
+          :word-wrap="true"
+          multiline
           placeholder="The Deflate compressed version of your string will be here"
           mb-5
         />
@@ -71,6 +77,8 @@ const compressedZlibOutput = computed(() => withDefaultOnError(() => Base64.from
         <h3>Decompressed string</h3>
         <TextareaCopyable
           v-model:value="decompressedOutput"
+          :word-wrap="true"
+          multiline
           placeholder="The decompressed string will be here"
           mb-5
         />