fix: multiple scrollbars and styling on modal when lots of models (mo…

…delCompose) (#380) * fix: multuiple scrollbars and styling * fix: styles for scrollableContent
microsoft · Jul 7, 2020 · a334cfc · a334cfc
1 parent 9ad9ac9
commit a334cfc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 28 deletions.
diff --git a/src/react/components/pages/modelCompose/composeModelView.tsx b/src/react/components/pages/modelCompose/composeModelView.tsx
@@ -52,7 +52,7 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
 
         const dark: ICustomizations = {
             settings: {
-              theme: getDarkGreyTheme(),
+                theme: getDarkGreyTheme(),
             },
             scopedSettings: {},
         };
@@ -63,15 +63,14 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
                     isOpen={!this.state.hideModal}
                     isModeless={false}
                     containerClassName="modal-container"
+                    scrollableContentClassName="scrollable-content"
                     >
-                        <h4>Add name for composed model</h4>
-                        <TextField
-                            className="modal-textfield"
-                            placeholder={strings.modelCompose.modelView.addComposeModelName}
-                            onChange={this.onTextChange}
-                            >
-                        </TextField>
-                    <div >
+                    <h4>Add name for composed model</h4>
+                    <TextField
+                        className="modal-textfield"
+                        placeholder={strings.modelCompose.modelView.addComposeModelName}
+                        onChange={this.onTextChange}
+                        />
                     {
                         this.state.items &&
                         <DetailsList
@@ -86,14 +85,11 @@ export default class ComposeModelView extends React.Component<IComposeModelViewP
                             >
                         </DetailsList>
                     }
-                    </div>
                     {
                         this.state.items.length < 2 &&
-                        <div className="modal-alert">
-                           {strings.modelCompose.modelView.NotEnoughModels}
-                        </div>
+                        <div className="modal-alert">{strings.modelCompose.modelView.NotEnoughModels}</div>
                     }
-                    <div className="model-button-container">
+                    <div className="modal-buttons-container">
                         <PrimaryButton
                             className="model-confirm"
                             theme={getPrimaryGreenTheme()}

diff --git a/src/react/components/pages/modelCompose/modelCompose.scss b/src/react/components/pages/modelCompose/modelCompose.scss
@@ -112,19 +112,20 @@ h4 {
 }
 
 .modal-container {
-    width: 700px;
-    min-height: 200px;
-    max-height: 400px;
-    padding: 20px;
-    padding-right: 10px;
+    width: 80%;
+    max-width: 64rem;
+    padding: 1.5rem;
+
+}
+
+.scrollable-content{
+    overflow: hidden;
 }
 
 .modal-list-container {
-    margin: 0;
-    width: 100%;
-    height: 80%;
-    min-height: 100px;
-    padding-bottom: 10px;
+    margin: 0.5rem;
+    max-height: 40vh;
+    overflow-x: hidden;
 }
 
 .modal-textfield {
@@ -137,10 +138,9 @@ h4 {
     margin-bottom: 1rem;
 }
 
-.modal-button-container {
-    width: 100%;
-    display: flex;
-    justify-content: right;
+.modal-buttons-container {
+    justify-content: space-between;
+    margin-top: 1.5rem;
 }
 
 .modal-confirm {