feat(#1460): include text hyphenation (#1469)

(cherry picked from commit 7d1aed1)
argilla-io · Jun 7, 2022 · ec23b2d · ec23b2d
1 parent a04b192
commit ec23b2d
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 22 deletions.
diff --git a/frontend/components/commons/header/filters/SortFilter.vue b/frontend/components/commons/header/filters/SortFilter.vue
@@ -159,10 +159,11 @@ export default {
     width: 100%;
     max-width: 280px;
     a {
-      word-break: break-all;
       text-decoration: none;
       max-width: 250px;
       display: block;
+      word-break: break-word;
+      hyphens: auto;
     }
   }
 }

diff --git a/frontend/components/commons/results/Metadata.vue b/frontend/components/commons/results/Metadata.vue
@@ -172,14 +172,15 @@ export default {
     color: $font-dark-color;
     font-weight: 600;
     &__item {
-      word-break: break-word;
       min-width: 200px;
       max-width: 300px;
       text-align: left;
       white-space: pre-line;
       color: palette(grey, medium);
       font-weight: normal;
       line-height: 1em;
+      word-break: break-word;
+      hyphens: auto;
     }
   }
   &__key {

diff --git a/frontend/components/commons/sidebar/SidebarProgress.vue b/frontend/components/commons/sidebar/SidebarProgress.vue
@@ -100,8 +100,8 @@ label {
   margin-bottom: 0.5em;
   display: block;
   width: calc(100% - 40px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  hyphens: auto;
+  word-break: break-word;
 }
 .total {
   font-weight: 600;

diff --git a/frontend/components/core/ReCheckbox.vue b/frontend/components/core/ReCheckbox.vue
@@ -150,9 +150,10 @@ $checkbox-color-dark: $primary-color;
     }
   }
   .checkbox-label {
-    word-break: break-all;
     line-height: $checkbox-size;
     margin-right: 0.5em;
+    word-break: break-word;
+    hyphens: auto;
   }
   &--dark {
     &.checked {
@@ -174,7 +175,8 @@ $checkbox-color-dark: $primary-color;
     height: auto;
     white-space: normal;
     text-transform: none;
-    word-break: break-all;
+    word-break: break-word;
+    hyphens: auto;
   }
 }
 

diff --git a/frontend/components/core/ReTag.vue b/frontend/components/core/ReTag.vue
@@ -21,11 +21,10 @@ export default {
   padding: 0.3em 1em;
   margin: 3.5px;
   max-width: 175px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   vertical-align: top;
   background: palette(grey, bg);
+  word-break: break-word;
+  hyphens: auto;
   @include media(">desktopLarge") {
     max-width: 200px;
   }

diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
@@ -550,6 +550,7 @@ export default {
   &__title {
     display: block;
     @include font-size(15px);
+    hyphens: auto;
     word-break: break-word;
     span {
       display: flex;
@@ -593,14 +594,16 @@ export default {
     display: inline-block;
     max-width: 280px;
     font-weight: 600;
+    hyphens: auto;
     word-break: break-word;
   }
   .array {
     p {
       margin-top: 0;
       margin-bottom: 0;
-      display: block;
-      word-break: break-all;
+      display: inline;
+      hyphens: auto;
+      word-break: break-word;
     }
   }
   .text {
@@ -612,7 +615,8 @@ export default {
       border-radius: 10px;
       margin-right: 0.5em;
       margin-top: 0;
-      word-break: break-all;
+      hyphens: auto;
+      word-break: break-word;
       &:last-child {
         margin-bottom: 0;
       }

diff --git a/frontend/components/text-classifier/header/global-actions/AnnotationLabelSelector.vue b/frontend/components/text-classifier/header/global-actions/AnnotationLabelSelector.vue
@@ -160,7 +160,8 @@ export default {
     padding: 0.5em 0;
     text-align: left;
     font-weight: 400;
-    word-break: break-all;
+    word-break: break-word;
+    hyphens: auto;
     .re-checkbox {
       margin: 0;
       display: flex;

diff --git a/frontend/components/text-classifier/sidebar/TextClassificationRules.vue b/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
@@ -181,8 +181,8 @@ $color: #333346;
 label {
   display: block;
   width: calc(100% - 40px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  hyphens: auto;
+  word-break: break-word;
 }
 .labels {
   margin-top: 3em;

diff --git a/frontend/components/text-classifier/sidebar/TextClassificationStats.vue b/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
@@ -80,8 +80,8 @@ export default {
 label {
   display: block;
   width: calc(100% - 40px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  hyphens: auto;
+  word-break: break-word;
 }
 .labels {
   margin-top: 3em;

diff --git a/frontend/components/text2text/sidebar/Text2TextStats.vue b/frontend/components/text2text/sidebar/Text2TextStats.vue
@@ -80,8 +80,8 @@ export default {
 label {
   display: block;
   width: calc(100% - 40px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-word;
+  hyphens: auto;
 }
 .labels {
   margin-top: 3em;

diff --git a/frontend/components/token-classifier/results/EntitiesSelector.vue b/frontend/components/token-classifier/results/EntitiesSelector.vue
@@ -196,8 +196,9 @@ export default {
         margin-bottom: 0.5em;
       }
       span {
-        word-break: break-all;
         cursor: pointer !important;
+        word-break: break-word;
+        hyphens: auto;
       }
     }
     &--empty {

diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue b/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue
@@ -69,7 +69,9 @@ export default {
   margin-bottom: 0.7em;
   font-weight: 600;
   label {
-    margin: 0; // for tagger
+    margin: 0;
+    word-break: break-word;
+    hyphens: auto;
     &[class^="color_"] {
       padding: 0.3em;
     }

diff --git a/frontend/layouts/app.vue b/frontend/layouts/app.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <div>
+  <div lang="en">
     <Nuxt v-if="!$slots.default" />
     <slot />
   </div>