Merge pull request #438 from smiclea/fix-layout

Fix Options and Storage screens layout

src/components/organisms/EditReplica/EditReplica.jsx

@@ -422,7 +422,6 @@ class EditReplica extends React.Component<Props, State> {
         storageConfigDefault={endpointStore.storageConfigDefault}
         onChange={(f, v) => { this.handleFieldChange(type, f, v) }}
         oneColumnStyle={{ marginTop: '-16px', display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }}
-        columnStyle={{ marginRight: 0 }}
         fieldWidth={StyleProps.inputSizes.large.width}
         onScrollableRef={ref => { this.scrollableRef = ref }}
         availableHeight={384}

src/components/organisms/WizardOptions/WizardOptions.jsx

@@ -35,6 +35,7 @@ const Wrapper = styled.div`
   display: flex;
   min-height: 0;
   flex-direction: column;
+  width: 100%;
 `
 const Options = styled.div`
   display: flex;
@@ -49,7 +50,6 @@ const Fields = styled.div`
 `
 const OneColumn = styled.div``
 const Column = styled.div`
-  ${props => props.left ? 'margin-right: 160px;' : ''}
   margin-top: -16px;
 `
 const FieldInputStyled = styled(FieldInput)`
@@ -86,7 +86,6 @@ type Props = {
   storageConfigDefault?: string,
   onAdvancedOptionsToggle?: (showAdvanced: boolean) => void,
   wizardType: string,
-  columnStyle?: { [string]: mixed },
   oneColumnStyle?: { [string]: mixed },
   fieldWidth?: number,
   onScrollableRef?: (ref: HTMLElement) => void,
@@ -239,7 +238,7 @@ class WizardOptions extends React.Component<Props> {
 
     if (fields.length * 96 < availableHeight) {
       return (
-        <Fields padding={this.props.layout === 'page' ? null : 32}>
+        <Fields padding={this.props.layout === 'page' ? null : 32} style={{ justifyContent: 'center' }}>
           <OneColumn style={this.props.oneColumnStyle}>
             {fields.map(f => f.component)}
           </OneColumn>
@@ -249,7 +248,7 @@ class WizardOptions extends React.Component<Props> {
 
     return (
       <Fields innerRef={this.props.onScrollableRef} padding={this.props.layout === 'page' ? null : 32}>
-        <Column left style={this.props.columnStyle}>
+        <Column left>
           {fields.map(f => f.column === 'left' && f.component)}
         </Column>
         <Column right>

src/components/organisms/WizardPageContent/WizardPageContent.jsx

@@ -362,6 +362,7 @@ class WizardPageContent extends React.Component<Props, State> {
             useAdvancedOptions
             hasStorageMap={false}
             wizardType={`${this.props.type}-source-options`}
+            layout="page"
           />
         )
         break
@@ -381,6 +382,7 @@ class WizardPageContent extends React.Component<Props, State> {
             storageConfigDefault={this.props.endpointStore.storageConfigDefault}
             wizardType={this.props.type}
             onAdvancedOptionsToggle={useAdvancedOptions => { this.handleAdvancedOptionsToggle(useAdvancedOptions) }}
+            layout="page"
           />
         )
         break

src/components/organisms/WizardStorage/WizardStorage.jsx

@@ -35,6 +35,7 @@ const Wrapper = styled.div`
   width: 100%;
   display: flex;
   justify-content: center;
+  overflow: auto;
 `
 const Mapping = styled.div`
   display: flex;
@@ -47,8 +48,6 @@ const StorageWrapper = styled.div`
   flex-direction: column;
   width: 100%;
   margin-bottom: 32px;
-  max-height: 100%;
-  min-height: 100px;
 
   &:last-child {
     margin-bottom: 0;
@@ -62,7 +61,6 @@ const StorageSection = styled.div`
 const StorageItems = styled.div`
   display: flex;
   flex-direction: column;
-  overflow: auto;
 `
 const StorageItem = styled.div`
   display: flex;