fix(TabletsFilters): properly display long data in select options

Author: ariser

src/containers/TabletsFilters/TabletsFilters.js

@@ -243,8 +243,6 @@ const Filters = ({
                 <Select
                     multiple
                     label="Node ID"
-                    showApply
-                    showItemMeta
                     width={TabletsFilters.CONTROL_WIDTH}
                     popupWidth={TabletsFilters.POPUP_WIDTH}
                     placeholder="All"
@@ -255,7 +253,7 @@ const Filters = ({
                         return (
                             <div className={b('node')}>
                                 <div>{option.content}</div>
-                                <div className={b('node-meta')}>{option.meta}</div>
+                                <div className={b('node-meta')} title={option.meta}>{option.meta}</div>
                             </div>
                         );
                     }}
@@ -267,7 +265,6 @@ const Filters = ({
                 <Select
                     multiple
                     label="multiple"
-                    showApply
                     width={TabletsFilters.CONTROL_WIDTH}
                     placeholder="All"
                     options={states}
@@ -280,7 +277,6 @@ const Filters = ({
                 <Select
                     multiple
                     label="Types"
-                    showApply
                     width={TabletsFilters.CONTROL_WIDTH}
                     placeholder="All"
                     options={types}

src/containers/TabletsFilters/TabletsFilters.scss

@@ -6,14 +6,18 @@
     @include flex-container();
 
     &__node {
-        display: flex;
-        flex-direction: column;
+        overflow: hidden;
 
         font-size: var(--yc-text-body-1-font-size);
         line-height: var(--yc-text-body-1-line-height);
     }
 
     &__node-meta {
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
         color: var(--yc-color-text-secondary);
     }