From 11478f908a1277d7f7321d202bc2ede4b6d1eb90 Mon Sep 17 00:00:00 2001
From: ngthhu <hungnt.code@proton.me>
Date: Tue, 23 Apr 2024 11:02:51 +0700
Subject: [PATCH] fix:[#525] more efficient solution

fix:[#525] custom word-wrap css class

lint fix
---
 components/Markdown.vue                       | 13 ++++++++++++-
 components/torrent/TorrentCommentTab.vue      |  2 +-
 components/torrent/TorrentCreatedByTab.vue    |  2 +-
 components/torrent/TorrentCreationDateTab.vue |  2 +-
 components/torrent/TorrentDescriptionTab.vue  |  2 +-
 components/torrent/TorrentEncodingTab.vue     |  2 +-
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/components/Markdown.vue b/components/Markdown.vue
index 745904dc..171e4e81 100644
--- a/components/Markdown.vue
+++ b/components/Markdown.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div class="prose" v-html="sanitizedDescription" />
+  <div class="prose max-w-none text-justify word-wrap" v-html="sanitizedDescription" />
 </template>
 
 <script setup lang="ts">
@@ -44,5 +44,16 @@ async function sanitizeDescription () {
 </script>
 
 <style scoped>
+.word-wrap {
+  -ms-word-break: break-all;
+  word-break: break-all;
 
+  /* Non standard for webkit */
+  word-break: break-word;
+
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
 </style>
diff --git a/components/torrent/TorrentCommentTab.vue b/components/torrent/TorrentCommentTab.vue
index 75ec3edf..96500406 100644
--- a/components/torrent/TorrentCommentTab.vue
+++ b/components/torrent/TorrentCommentTab.vue
@@ -12,7 +12,7 @@
       </button>
     </div>
     <template v-if="!collapsed">
-      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl break-words">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.comment">
           <Markdown :source="torrent.comment" />
         </template>
diff --git a/components/torrent/TorrentCreatedByTab.vue b/components/torrent/TorrentCreatedByTab.vue
index ca798359..8567a9b9 100644
--- a/components/torrent/TorrentCreatedByTab.vue
+++ b/components/torrent/TorrentCreatedByTab.vue
@@ -12,7 +12,7 @@
       </button>
     </div>
     <template v-if="!collapsed">
-      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl break-words">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.created_by">
           <Markdown :source="torrent.created_by" />
         </template>
diff --git a/components/torrent/TorrentCreationDateTab.vue b/components/torrent/TorrentCreationDateTab.vue
index 15069efa..40064aa9 100644
--- a/components/torrent/TorrentCreationDateTab.vue
+++ b/components/torrent/TorrentCreationDateTab.vue
@@ -12,7 +12,7 @@
       </button>
     </div>
     <template v-if="!collapsed">
-      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl break-words">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.creation_date">
           {{ formattedDateFromTimestamp }}
         </template>
diff --git a/components/torrent/TorrentDescriptionTab.vue b/components/torrent/TorrentDescriptionTab.vue
index cd0d1457..53244509 100644
--- a/components/torrent/TorrentDescriptionTab.vue
+++ b/components/torrent/TorrentDescriptionTab.vue
@@ -12,7 +12,7 @@
       </button>
     </div>
     <template v-if="!collapsed">
-      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl break-words">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.description">
           <Markdown :source="torrent.description" />
         </template>
diff --git a/components/torrent/TorrentEncodingTab.vue b/components/torrent/TorrentEncodingTab.vue
index 7c3e81e5..94528171 100644
--- a/components/torrent/TorrentEncodingTab.vue
+++ b/components/torrent/TorrentEncodingTab.vue
@@ -12,7 +12,7 @@
       </button>
     </div>
     <template v-if="!collapsed">
-      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl break-words">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.encoding">
           <Markdown :source="torrent.encoding" />
         </template>