fix(visualization): force break word in selectors (#1406)

(cherry picked from commit 260d76d)
argilla-io · Apr 12, 2022 · 5ac1950 · 5ac1950
1 parent 829269f
commit 5ac1950
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/frontend/components/commons/header/filters/SortFilter.vue b/frontend/components/commons/header/filters/SortFilter.vue
@@ -170,9 +170,7 @@ export default {
     width: 100%;
     max-width: 280px;
     a {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      word-break: break-all;
       text-decoration: none;
       max-width: 250px;
       display: block;

diff --git a/frontend/components/core/ReCheckbox.vue b/frontend/components/core/ReCheckbox.vue
@@ -125,6 +125,8 @@ $checkbox-color-dark: $primary-color;
     text-align: center;
     vertical-align: middle;
     text-align: center;
+    margin-right: 0;
+    margin-left: auto;
     .svg-icon {
       fill: $lighter-color;
       transform: scale(0);
@@ -142,9 +144,9 @@ $checkbox-color-dark: $primary-color;
     }
   }
   .checkbox-label {
-    height: $checkbox-size;
+    word-break: break-all;
     line-height: $checkbox-size;
-    margin-right: auto;
+    margin-right: 0.5em;
   }
   &--dark {
     &.checked {
@@ -164,7 +166,6 @@ $checkbox-color-dark: $primary-color;
 .checkbox-label {
   .dropdown--filter & {
     height: auto;
-    padding-right: 2em;
     white-space: normal;
     text-transform: none;
     word-break: break-all;

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

diff --git a/frontend/components/token-classifier/results/EntitiesSelector.vue b/frontend/components/token-classifier/results/EntitiesSelector.vue
@@ -195,6 +195,7 @@ export default {
         margin-bottom: 0.5em;
       }
       span {
+        word-break: break-all;
         cursor: pointer !important;
       }
     }