fix: text overflow on snippet

daxa-ai · Sep 2, 2024 · 2b08de1 · 2b08de1
1 parent 75d6238
commit 2b08de1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/pebblo/app/pebblo-ui/src/components/snippetDetails.js b/pebblo/app/pebblo-ui/src/components/snippetDetails.js
@@ -8,7 +8,7 @@ import { Tooltip } from "./tooltip.js";
 
 function DisplaySnippet(props) {
   const { formattedString } = props;
-  return `<div>
+  return `<div class="word-wrap-break">
       ${formattedString.myMap((item, index) =>
         item?.score
           ? Tooltip({

diff --git a/pebblo/app/pebblo-ui/static/index.css b/pebblo/app/pebblo-ui/static/index.css
@@ -1127,6 +1127,10 @@ dialog::backdrop {
   border: 1px solid#D8D9E380;
 }
 
+.word-wrap-break {
+  word-wrap: break-word;
+}
+
 /* TOOLTIP */
 
 .tooltip-wrapper {