Fix style for mobile view (#6617)

Signed-off-by: Lu Yu <[email protected]>
opensearch-project · Apr 23, 2024 · f80f059 · f80f059
1 parent 543bbea
commit f80f059
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;