fix: better ui, word wrap

Author: sharevb

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>

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
         />