Merge #535: fix:[#525] more efficient solution

11478f9 fix:[#525] more efficient solution (ngthhu)

Pull request description:

ACKs for top commit:
  josecelano:
    ACK 585447a

Tree-SHA512: 4aa664c7fabcac6a523c1588518452d90b16b368e9075434f89ce70fb1ec88b74c66a3ad622e51b5eca002551c6f6315a8538d900a877d2522bf6e8ec80fd120

Author: josecelano

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>

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>

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>

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">
           <Markdown :source="formattedDateFromTimestamp" />
         </template>

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>

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>