From ed626c45e073db59e69eb7d15ef8aeaf101bc152 Mon Sep 17 00:00:00 2001
From: alex-krasn <64093224+alex-krasn@users.noreply.github.com>
Date: Fri, 10 Jul 2020 16:03:20 -0700
Subject: [PATCH] fix: overflow of excluded models list (#400)

Co-authored-by: kunzheng <58841788+kunzms@users.noreply.github.com>
---
 .../pages/modelCompose/composeModelView.tsx   |  1 +
 .../pages/modelCompose/modelCompose.scss      | 20 ++++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/react/components/pages/modelCompose/composeModelView.tsx b/src/react/components/pages/modelCompose/composeModelView.tsx
index 65a6a2c42..a029a06d6 100644
--- a/src/react/components/pages/modelCompose/composeModelView.tsx
+++ b/src/react/components/pages/modelCompose/composeModelView.tsx
@@ -91,6 +91,7 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
                         <div className="excluded-items-container">
                             <h6>{this.state.cannotBeIncludeModels.length > 1 ? strings.modelCompose.modelView.modelsCannotBeIncluded : strings.modelCompose.modelView.modelCannotBeIncluded}</h6>
                             <DetailsList
+                                className="excluded-items-list"
                                 items={this.state.cannotBeIncludeModels}
                                 columns={columns}
                                 compact={true}
diff --git a/src/react/components/pages/modelCompose/modelCompose.scss b/src/react/components/pages/modelCompose/modelCompose.scss
index 7b45aeb34..dedeeb2eb 100644
--- a/src/react/components/pages/modelCompose/modelCompose.scss
+++ b/src/react/components/pages/modelCompose/modelCompose.scss
@@ -144,13 +144,23 @@ h4 {
 }
 
 .excluded-items-container {
+    display: flex;
+    flex-direction: column;
     border-radius: 2px;
-    border: 1px rgba(255, 255, 255, 0.25) solid;
-    background-color: rgba(255, 0, 0, 0.295);
-    text-align: center;
-    color: white;
+    border: 2px rgba(255, 0, 0, 0.3) solid;
+    margin: 1rem .25rem;
+    overflow-x: hidden;
     h6 {
-        padding-top: .25rem;
+        background-color: rgba(255, 0, 0, 0.3);
+        padding: .25rem;
+        text-align: center;
+        margin: 0;
+    }
+    .excluded-items-list {
+        display: flex;
+        overflow-x: hidden;
+        max-height: 6rem;
+        margin: 1px;
     }
 }