Fix style for mobile view (#6617) (#6619)

(cherry picked from commit f80f059) Signed-off-by: Lu Yu <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Apr 23, 2024 · 7a206dd · 7a206dd
1 parent dbf9df1
commit 7a206dd
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/...management/public/components/data_source_aggregated_view/data_source_aggregated_view.scss b/...management/public/components/data_source_aggregated_view/data_source_aggregated_view.scss
@@ -11,10 +11,20 @@
 
   .euiSelectableListItem__content {
     cursor: default;
+
+
+  .euiSelectableListItem__text {
+    max-height: 100%; 
+  }
   }
-  /* stylelint-enable */
 
   .dataSourceAggregatedViewOuiFlexGroup {
+    .euiFlexItem {
+      max-width: fit-content;
+    }
+
+      /* stylelint-enable */
+
     .dataSourceAggregatedViewOuiFlexItem {
       color: grey;
       text-overflow: ellipsis;

diff --git a/...ta_source_management/public/components/data_source_selectable/data_source_selectable.scss b/...ta_source_management/public/components/data_source_selectable/data_source_selectable.scss
@@ -1,12 +1,23 @@
 .dataSourceSelectableOuiPanel {
   width: 300px;
 
+  /* stylelint-disable */
+  .euiSelectableListItem__text {
+    max-height: 100%;
+  }
+
   .dataSourceSelectableOuiFlexGroup {
+    .euiFlexItem {
+      max-width: fit-content;
+    }
+    /* stylelint-enable */
+
     .dataSourceSelectableOuiFlexItem {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
       display: inline-block;
+      max-width: fit-content;
     }
   }
 }
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.scss b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.scss
@@ -1,8 +1,19 @@
 .dataSourceViewOuiPanel {
   width: 300px;
+
+  /* stylelint-disable */
+
+  .euiSelectableListItem__text {
+    max-height: 100%;
+  }
 }
 
 .dataSourceViewOuiFlexGroup {
+  .euiFlexItem {
+    max-width: fit-content;
+  }
+    /* stylelint-enable */
+
   .dataSourceViewOuiFlexItem {
     color: grey;
     text-overflow: ellipsis;