Fix/407 text wrap markdown issue (#616)

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -23,15 +23,18 @@
             </template>
             <template v-else-if="detail.type === 'markdown'">
               <ClientOnly>
-                <Markdown :source="detail.text" />
+                <div class="markdown-container w-full overflow-hidden break-words">
+                  <Markdown :source="detail.text" />
+                </div>
               </ClientOnly>
             </template>
             <template v-else>
-              <span class="flex items-center text-wrap">
-                {{ detail.text }}
+              <!-- Fixed version with improved overflow handling -->
+              <span class="flex w-full items-center break-words">
+                <span class="overflow-hidden break-all">{{ detail.text }}</span>
                 <span
                   v-if="detail.copyable"
-                  class="my-0 ml-4 opacity-0 transition-opacity duration-75 group-hover:opacity-100"
+                  class="my-0 ml-4 shrink-0 opacity-0 transition-opacity duration-75 group-hover:opacity-100"
                 >
                   <CopyText
                     v-if="detail.text.toString()"
@@ -60,3 +63,99 @@
     },
   });
 </script>
+
+<style>
+  /* Use :deep to target elements inside the markdown container */
+  :deep(.markdown-container) {
+    /* General container styles */
+    width: 100%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    /* Handle tables */
+    table {
+      table-layout: fixed;
+      width: 100%;
+    }
+
+    td,
+    th {
+      word-break: break-word;
+      overflow-wrap: break-word;
+      max-width: 100%;
+    }
+
+    /* Handle code blocks */
+    pre,
+    code {
+      white-space: pre-wrap;
+      word-break: break-all;
+      overflow-x: auto;
+    }
+
+    /* Handle images */
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    /* Handle headings */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
+
+    /* Handle blockquotes */
+    blockquote {
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
+
+    /* Handle inline elements */
+    a,
+    strong,
+    em {
+      word-break: break-all;
+      overflow-wrap: break-word;
+    }
+  }
+
+  /* Non-scoped styles for regular text */
+  .break-all {
+    word-break: break-all;
+    max-width: 100%;
+  }
+
+  /* Handle very long words */
+  pre,
+  code,
+  a,
+  p,
+  span,
+  div,
+  td,
+  th,
+  li,
+  blockquote,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+</style>

frontend/components/global/Markdown.vue

@@ -25,11 +25,18 @@
 
 <template>
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div class="markdown text-wrap" v-html="raw"></div>
+  <div class="markdown text-wrap break-words" v-html="raw"></div>
 </template>
 
 <style scoped>
   * {
     --y-gap: 0.65rem;
+    word-wrap: break-word; /*Fix for long words going out of emelent bounds and issue #407 */
+    overflow-wrap: break-word; /*Fix for long words going out of emelent bounds and issue #407 */
+    white-space: pre-wrap; /*Fix for long words going out of emelent bounds and issue #407 */
+  }
+  .markdown {
+    max-width: 100%;
+    overflow: hidden; /*Fix for long words going out of emelent bounds and issue #407 */
   }
 </style>