fix: overflow of excluded models list (microsoft#400)

Co-authored-by: kunzheng <[email protected]>
jamesor19 · Jul 10, 2020 · ed626c4 · ed626c4
1 parent 18fb4d7
commit ed626c4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -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;
     }
 }