Incorporate vertical scroll shadows to modals

frontend/public/components/catalog/_catalog.scss

@@ -140,19 +140,10 @@ $catalog-item-icon-size-sm: 24px;
 
   // Enable scrolling on the modal
   &__overlay {
-    .modal-body {
-      flex: 1 1 auto;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-
-      .hint-block-pf {
+    .modal-body .hint-block-pf {
         margin-bottom: 10px;
-      }
-    }
-    .modal-content {
-      display: flex;
-      flex-direction: column;
     }
+
     .properties-side-panel-pf {
       flex: 0 0 auto;
     }

frontend/public/components/catalog/catalog-item-details.jsx

@@ -69,28 +69,32 @@ export class CatalogTileDetails extends React.Component {
             iconImg={tileImgUrl} />
         </Modal.Header>
         <Modal.Body>
-          <div className="co-catalog-page__overlay-body">
-            <PropertiesSidePanel>
-              <Link className="btn btn-primary co-catalog-page__overlay-create" to={href} role="button" title={this.props.item.createLabel} onClick={closeOverlay}>{this.props.item.createLabel}</Link>
-              {tileProvider && <PropertyItem label="Provider" value={tileProvider} />}
-              {supportUrl && <PropertyItem label="Support" value={supportUrlLink} />}
-              {creationTimestamp && <PropertyItem label="Created At" value={<Timestamp timestamp={creationTimestamp} />} />}
-            </PropertiesSidePanel>
-            <div className="co-catalog-page__overlay-description">
-              {tileDescription && <p>{tileDescription}</p>}
-              {longDescription && <p>{longDescription}</p>}
-              {sampleRepo && <p>Sample repository: {sampleRepoLink}</p>}
-              {documentationUrl && <React.Fragment>
-                <h2 className="h5">Documentation</h2>
-                <p>{documentationUrlLink}</p>
-              </React.Fragment>}
-              {!_.isEmpty(plans) && <React.Fragment>
-                <h2 className="h5">Service Plans</h2>
-                <ul>
-                  {planItems}
-                </ul>
-              </React.Fragment>}
-              {kind === 'ImageStream' && <SourceToImageResourceDetails />}
+          <div className="modal-body-content">
+            <div className="modal-body-inner-shadow-covers">
+              <div className="co-catalog-page__overlay-body">
+                <PropertiesSidePanel>
+                  <Link className="btn btn-primary co-catalog-page__overlay-create" to={href} role="button" title={this.props.item.createLabel} onClick={closeOverlay}>{this.props.item.createLabel}</Link>
+                  {tileProvider && <PropertyItem label="Provider" value={tileProvider} />}
+                  {supportUrl && <PropertyItem label="Support" value={supportUrlLink} />}
+                  {creationTimestamp && <PropertyItem label="Created At" value={<Timestamp timestamp={creationTimestamp} />} />}
+                </PropertiesSidePanel>
+                <div className="co-catalog-page__overlay-description">
+                  {tileDescription && <p>{tileDescription}</p>}
+                  {longDescription && <p>{longDescription}</p>}
+                  {sampleRepo && <p>Sample repository: {sampleRepoLink}</p>}
+                  {documentationUrl && <React.Fragment>
+                    <h2 className="h5">Documentation</h2>
+                    <p>{documentationUrlLink}</p>
+                  </React.Fragment>}
+                  {!_.isEmpty(plans) && <React.Fragment>
+                    <h2 className="h5">Service Plans</h2>
+                    <ul>
+                      {planItems}
+                    </ul>
+                  </React.Fragment>}
+                  {kind === 'ImageStream' && <SourceToImageResourceDetails />}
+                </div>
+              </div>
             </div>
           </div>
         </Modal.Body>

frontend/public/components/factory/modal.tsx

@@ -35,7 +35,7 @@ export const createModalLauncher: CreateModalLauncher = (Component) => (props) =
           isOpen={true}
           contentLabel="Modal"
           onRequestClose={closeModal}
-          className="modal-dialog modal-content"
+          className="modal-dialog"
           overlayClassName="co-overlay"
           shouldCloseOnOverlayClick={!props.blocking}>
           <Component {...props} cancel={closeModal} close={closeModal} />
@@ -48,7 +48,14 @@ export const createModalLauncher: CreateModalLauncher = (Component) => (props) =
 
 export const ModalTitle: React.SFC<ModalTitleProps> = ({children, className = 'modal-header'}) => <div className={className}><h4 className="modal-title">{children}</h4></div>;
 
-export const ModalBody: React.SFC<ModalBodyProps> = ({children, className= 'modal-body'}) => <div className={className}>{children}</div>;
+export const ModalBody: React.SFC<ModalBodyProps> = ({children, className= 'modal-body'}) => (
+  <div className={className}>
+    <div className="modal-body-content">
+      <div className="modal-body-inner-shadow-covers">{children}</div>
+    </div>
+  </div>
+);
+
 
 export const ModalFooter: React.SFC<ModalFooterProps> = ({message, errorMessage, inProgress, children}) => {
   return <ButtonBar className="modal-footer" errorMessage={errorMessage} infoMessage={message} inProgress={inProgress}>

frontend/public/components/modals/_modals.scss

@@ -26,42 +26,75 @@
   }
 }
 
+// Modal modifications to enable vertical scrolling with shadow overlays
 .modal-body {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
+  height: 100%;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch; // enable momentum scrolling in mobile Safari
+  padding: 0;
+  @include scroll-shadows-vertical;
+  -webkit-overflow-scrolling: touch;
+}
+
+.modal-body-content {
+  height: 100%;
+}
+
+.modal-body-inner-shadow-covers {
+  min-height: 100%;
+  padding: ($grid-gutter-width / 2) $modal-title-padding-horizontal;
+  @include scroll-shadows-vertical-covers;
+  width: 100%;
+
+  // so that input, textarea, button, and input-group-addon don't mask the inner scroll shadows
+  input, textarea {
+    &.form-control {
+      background-color: transparent;
+      &[disabled],
+      &[readonly] {
+        background-color: rgba(234, 234, 234, 0.5);
+      }
+    }
+  }
 
-  @media(max-width: $screen-xs-max) {
-    bottom: 75px;
-    height: auto;
-    left: 11px;
-    position: fixed;
-    right: 11px;
-    top: 54px;
-    width: auto;
+  .input-group-addon {
+    background-color: rgba(227, 227, 227, 0.5);
   }
+}
 
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   @media(min-width: $screen-sm-min) {
-    max-height: calc(100vh - 165px); // 165px = 30 (margin-top) + 44 (modal-header) + 15 (modal-footer margin-top) + 44 (modal-footer) + 30 (margin-bottom) + 2px (top/bottom border)
-    min-height: 200px;
+    max-height: 415px;
+  }
+  min-height: 250px;
+  position: relative;
+}
+
+@media(min-width: $screen-sm-min) {
+  .modal-content--large {
+    max-height: 530px;
   }
 
+  .modal-content--small {
+    max-height: 300px;
+  }
 }
 
+// setting a height on modal-dialog enables flex child height to shrink and become scrollable
 .modal-dialog {
-  @media(max-width: $screen-xs-max) {
-    height: calc(100% - 20px);
+  height: calc(100% - 20px); // subtract height margin-top 10px + margin-bottom 10px
+  outline: 0;
+
+  @media(min-width: $screen-sm-min) {
+    height: calc(100% - 60px); // subtract height margin-top 30px + margin-bottom 30px
   }
 }
 
 .modal-footer {
-  bottom: 0;
-  left: 0;
-  padding-top: 0;
-  position: absolute;
-  right: 0;
-  @media(min-width: $screen-sm-min) {
-    position: relative;
-  }
+  margin-top: 0;
 }

frontend/public/components/modals/add-secret-to-workload.tsx

@@ -163,7 +163,7 @@ export class AddSecretToWorkloadModal extends React.Component<AddSecretToWorkloa
     const addAsVolume = addAs === 'volume';
     const selectWorkloadPlaceholder = 'Select a workload';
 
-    return <form onSubmit={this.submit} name="co-add-secret-to-workload" className="co-add-secret-to-workload">
+    return <form onSubmit={this.submit} name="co-add-secret-to-workload" className="co-add-secret-to-workload modal-content">
       <ModalTitle>Add Secret to Workload</ModalTitle>
       <ModalBody>
         <p>

frontend/public/components/modals/cluster-update-modal.tsx

@@ -41,7 +41,7 @@ class ClusterUpdateModal extends PromiseComponent {
     const currentVersion = getCurrentClusterVersion(cv);
     const dropdownItems = _.map(availableUpdates, 'version');
     const dropdownTitle = _.get(availableUpdates[selectedVersion], 'version');
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content">
       <ModalTitle>Update Cluster</ModalTitle>
       <ModalBody>
         <p>

frontend/public/components/modals/configure-count-modal.jsx

@@ -55,7 +55,7 @@ class ConfigureCountModal extends PromiseComponent {
   }
 
   render() {
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content modal-content--small">
       <ModalTitle>{this.props.title}</ModalTitle>
       <ModalBody>
         <p>{this.props.message}</p>

frontend/public/components/modals/configure-ns-pull-secret-modal.jsx

@@ -169,7 +169,7 @@ class ConfigureNamespacePullSecret extends PromiseComponent {
 
     const existingData = parseExisitingPullSecret(pullSecret);
 
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content">
       <ModalTitle>Default Pull Secret</ModalTitle>
       <ModalBody>
         <p>

frontend/public/components/modals/configure-operator-channel-modal.jsx

@@ -38,7 +38,7 @@ class ConfigureOperatorChannel extends PromiseComponent {
       'tectonic-1.9-preproduction': 'Tectonic-1.9-preproduction',
       'tectonic-1.9-production': 'Tectonic-1.9-production',
     };
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content">
       <ModalTitle>Update Channel</ModalTitle>
       <ModalBody>
         <div className="co-m-form-row">

frontend/public/components/modals/configure-operator-modal.jsx

@@ -43,7 +43,7 @@ class ConfigureOperatorModal extends PromiseComponent {
   }
 
   render() {
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content">
       <ModalTitle>{this.props.title}</ModalTitle>
       <ModalBody>
         <div className="co-m-form-row">{this.props.message}</div>

frontend/public/components/modals/configure-unschedulable-modal.jsx

@@ -23,7 +23,7 @@ class UnscheduleNodeModal extends PromiseComponent {
   }
 
   render() {
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content modal-content--small">
       <ModalTitle>Mark as Unschedulable</ModalTitle>
       <ModalBody>
         Unschedulable nodes won&#39;t accept new pods. This is useful for scheduling maintenance or preparing to decommission a node.

frontend/public/components/modals/configure-update-strategy-modal.jsx

@@ -61,7 +61,7 @@ class ConfigureUpdateStrategyModal extends PromiseComponent {
     const maxUnavailable = _.get(this.deployment.spec, 'strategy.rollingUpdate.maxUnavailable', '');
     const maxSurge = _.get(this.deployment.spec, 'strategy.rollingUpdate.maxSurge', '');
 
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content modal-content--large">
       <ModalTitle>Edit Update Strategy</ModalTitle>
       <ModalBody>
         <div className="co-m-form-row">

frontend/public/components/modals/confirm-modal.jsx

@@ -22,7 +22,7 @@ class ConfirmModal extends PromiseComponent {
   }
 
   render() {
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content">
       <ModalTitle>{this.props.title}</ModalTitle>
       <ModalBody>{this.props.message}</ModalBody>
       <ModalSubmitFooter errorMessage={this.state.errorMessage} inProgress={this.state.inProgress} submitText={this.props.btnText || 'Confirm'} cancel={this._cancel} />

frontend/public/components/modals/create-namespace-modal.jsx

@@ -101,7 +101,7 @@ const CreateNamespaceModal = connect(null, mapDispatchToProps)(class CreateNames
       [allow]: 'No restrictions (default)',
       [deny]: 'Deny all inbound traffic',
     };
-    return <form onSubmit={this._submit.bind(this)} name="form" className="co-p-new-user-modal">
+    return <form onSubmit={this._submit.bind(this)} name="form" className="modal-content co-p-new-user-modal">
       <ModalTitle>Create {label}</ModalTitle>
       <ModalBody>
         <div className="form-group">

frontend/public/components/modals/delete-modal.jsx

@@ -43,7 +43,7 @@ class DeleteModal extends PromiseComponent {
 
   render() {
     const {kind, resource} = this.props;
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content modal-content--small">
       <ModalTitle>Delete {kind.label}</ModalTitle>
       <ModalBody className="modal-body">
         <div className="co-delete-modal">

frontend/public/components/modals/delete-namespace-modal.jsx

@@ -28,7 +28,7 @@ class DeleteNamespaceModal extends PromiseComponent {
   }
 
   render() {
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content modal-content--small">
       <ModalTitle>Delete {this.props.kind.label}</ModalTitle>
       <ModalBody className="modal-body">
         <div className="co-delete-modal">

frontend/public/components/modals/disable-application-modal.tsx

@@ -38,7 +38,7 @@ export class DisableApplicationModal extends PromiseComponent {
   render() {
     const {name} = this.props.subscription.spec;
 
-    return <form onSubmit={this.submit.bind(this)} name="form" className="co-catalog-install-modal">
+    return <form onSubmit={this.submit.bind(this)} name="form" className="modal-content co-catalog-install-modal">
       <ModalTitle className="modal-header">Remove Subscription</ModalTitle>
       <ModalBody>
         <div>

frontend/public/components/modals/error-modal.jsx

@@ -5,7 +5,7 @@ import {createModalLauncher, ModalTitle, ModalBody, ModalFooter} from '../factor
 export const errorModal = createModalLauncher(
   ({error, cancel}) => {
     return (
-      <div>
+      <div className="modal-content">
         <ModalTitle>Error</ModalTitle>
         <ModalBody>{error}</ModalBody>
         <ModalFooter inProgress={false} errorMessage=""><button type="button" onClick={(e) => cancel(e)} className="btn btn-default">OK</button></ModalFooter>

frontend/public/components/modals/installplan-approval-modal.tsx

@@ -34,7 +34,7 @@ export class InstallPlanApprovalModal extends PromiseComponent {
   }
 
   render() {
-    return <form onSubmit={this.submit.bind(this)} name="form">
+    return <form onSubmit={this.submit.bind(this)} name="form" className="modal-content">
       <ModalTitle className="modal-header">Change Update Approval Strategy</ModalTitle>
       <ModalBody>
         <div className="co-m-form-row">

frontend/public/components/modals/labels-modal.jsx

@@ -50,7 +50,7 @@ class BaseLabelsModal extends PromiseComponent {
   render() {
     const { kind, resource, description, message, labelClassName } = this.props;
 
-    return <form onSubmit={this._submit} name="form">
+    return <form onSubmit={this._submit} name="form" className="modal-content">
       <ModalTitle>Edit {description || 'Labels'}</ModalTitle>
       <ModalBody>
         <div className="row co-m-form-row">

frontend/public/components/modals/subscription-channel-modal.tsx

@@ -28,7 +28,7 @@ export class SubscriptionChannelModal extends PromiseComponent {
   }
 
   render() {
-    return <form onSubmit={this.submit.bind(this)} name="form">
+    return <form onSubmit={this.submit.bind(this)} name="form" className="modal-content">
       <ModalTitle className="modal-header">Change Subscription Update Channel</ModalTitle>
       <ModalBody>
         <div className="co-m-form-row">

frontend/public/components/modals/tags.jsx

@@ -56,7 +56,7 @@ class TagsModal extends PromiseComponent {
   render() {
     const {tags} = this.state;
 
-    return <form onSubmit={this._submit}>
+    return <form onSubmit={this._submit} className="modal-content modal-content--large">
       <ModalTitle>{this.props.title}</ModalTitle>
       <ModalBody>
         <NameValueEditorComponent nameValuePairs={tags} submit={this._submit} updateParentData={this._updateTags} />

frontend/public/components/modals/token-info-modal.jsx

@@ -34,7 +34,7 @@ class TokenInfoModal extends PromiseComponent {
       e.stopPropagation();
       this.props.close(e);
     };
-    return <div>
+    return <div className="modal-content">
       <ModalTitle>Token Information</ModalTitle>
       <ModalBody><pre style={{whiteSpace: 'pre-wrap'}}>{this.state.tokenReview}</pre></ModalBody>
       <ModalFooter inProgress={this.state.inProgress} errorMessage={this.state.errorMessage}>