Fix assessment details tables layout

Fix the tables layout disturbances caused by the widening of the layout.

src/components/molecules/AssessedVmListItem/index.jsx

@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { observer } from 'mobx-react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import Checkbox from '../../atoms/Checkbox'
 import InfoIcon from '../../atoms/InfoIcon'
@@ -24,31 +24,35 @@ import DropdownLink from '../../molecules/DropdownLink'
 import type { VmItem, VmSize } from '../../../types/Assessment'
 
 import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
 
 const Wrapper = styled.div`
   position: relative;
+  width: 100%;
 `
 const Content = styled.div`
   display: flex;
-  margin-left: -16px;
+  margin-left: -32px;
 
   & > div {
-    margin-left: 16px;
+    margin-left: 32px;
   }
 
   opacity: ${props => props.disabled ? 0.6 : 1};
 `
+const columnWidth = (width: string) => css`
+  width: 100%;
+  max-width: ${width};
+`
 const DisplayName = styled.div`
   display: flex;
-  ${props => StyleProps.exactWidth(props.width)}
-`
-const DisplayNameLabel = styled.div`
-  margin-left: 8px;
+  ${props => columnWidth(props.width)}
 `
 const Value = styled.div`
   color: ${Palette.grayscale[4]};
-  ${props => props.width ? StyleProps.exactWidth(props.width) : ''}
+  ${props => columnWidth(props.width)}
+`
+const DisplayNameLabel = styled.div`
+  margin-left: 8px;
 `
 const InfoIconStyled = styled(InfoIcon) `
   position: absolute;
@@ -58,7 +62,6 @@ const InfoIconStyled = styled(InfoIcon) `
 
 type Props = {
   item: VmItem,
-  columnsWidths: string[],
   selected: boolean,
   onSelectedChange: (item: VmItem, isChecked: boolean) => void,
   disabled: boolean,
@@ -70,11 +73,6 @@ type Props = {
 }
 @observer
 class AssessedVmListItem extends React.Component<Props> {
-  getColumnWidth(index: number) {
-    let width = parseInt(this.props.columnsWidths[index], 10)
-    return `${width - 16}px`
-  }
-
   renderInfoIcon() {
     if (!this.props.disabled) {
       return null
@@ -100,7 +98,7 @@ class AssessedVmListItem extends React.Component<Props> {
       <Wrapper>
         {this.renderInfoIcon()}
         <Content disabled={this.props.disabled}>
-          <DisplayName width={this.getColumnWidth(0)}>
+          <DisplayName width="25%">
             <Checkbox
               checked={this.props.selected}
               onChange={checked => { this.props.onSelectedChange(this.props.item, checked) }}
@@ -108,16 +106,16 @@ class AssessedVmListItem extends React.Component<Props> {
             />
             <DisplayNameLabel>{`${this.props.item.properties.datacenterContainer}/${this.props.item.properties.displayName}`}</DisplayNameLabel>
           </DisplayName>
-          <Value width={this.getColumnWidth(1)}>
+          <Value width="25%">
             {this.props.item.properties.operatingSystem}
           </Value>
-          <Value width={this.getColumnWidth(2)}>
+          <Value width="25%">
             {standardCount} Standard, {premiumCount} Premium
           </Value>
-          <Value>
+          <Value width="25%">
             <DropdownLink
               searchable
-              width={this.props.columnsWidths[3]}
+              width="208px"
               noItemsLabel="Loading..."
               items={this.props.loadingVmSizes ? [] : this.props.vmSizes.map(s => ({ value: s.name, label: s.name, size: s }))}
               selectedItem={this.props.selectedVmSize ? this.props.selectedVmSize.name : ''}

src/components/organisms/AssessmentDetailsContent/index.jsx

@@ -58,9 +58,11 @@ const DetailsBody = styled.div`
 `
 const Columns = styled.div`
   display: flex;
+  margin-left: -32px;
 `
 const Column = styled.div`
   width: 50%;
+  margin-left: 32px;
 `
 const Row = styled.div`
   margin-bottom: 32px;
@@ -104,7 +106,7 @@ const LoadingText = styled.div`
   font-size: 18px;
   margin-top: 32px;
 `
-const TableStyled = styled(Table) `
+const TableStyled = styled(Table)`
   margin-top: 62px;
   ${props => props.addWidthPadding ? css`
     margin-left: -24px;
@@ -121,16 +123,31 @@ const TableBodyStyle = css`
 `
 const NetworkItem = styled.div`
   display: flex;
+  width: 100%;
+`
+const column = () => css`
+  padding-right: 32px;
+  width: 100%;
+  max-width: 25%;
 `
 const NetworkName = styled.div`
-  ${props => StyleProps.exactWidth(props.width)}
+  ${column()}
 `
 const Arrow = styled.div`
+  width: 32px;
   height: 16px;
+  position: absolute;
+  right: 0;
   background: url('${arrowImage}') no-repeat;
-  ${props => StyleProps.exactWidth(props.width)}
   background-position-y: center;
 `
+const ColumnStub = styled.div`
+  ${column()}
+  position: relative;
+  &:last-child {
+    padding-right: 0;
+  }
+`
 const VmHeaderItem = styled.div`
   display: flex;
   font-size: 14px;
@@ -316,13 +333,11 @@ class AssessmentDetailsContent extends React.Component<Props> {
       return null
     }
 
-    const COLUMN_WIDTHS = ['278px', '186px', '260px', '180px']
     let items = this.props.filteredAssessedVms.map(vm => {
       let filteredVm = this.props.filteredAssessedVms.find(v => v.id === vm.id)
       return (
         <AssessedVmListItem
           item={vm}
-          columnsWidths={COLUMN_WIDTHS}
           selected={this.props.selectedVms.filter(m => m.id === vm.id).length > 0}
           onSelectedChange={(vm, selected) => { this.props.onVmSelectedChange(vm, selected) }}
           disabled={!this.doesVmMatchSource(vm)}
@@ -355,7 +370,6 @@ class AssessmentDetailsContent extends React.Component<Props> {
         items={items}
         bodyStyle={TableBodyStyle}
         headerStyle={TableHeaderStyle}
-        columnsWidths={COLUMN_WIDTHS}
         header={[vmHeaderItem, 'OS', 'Target Disk Type', 'Azure VM Size']}
         useSecondaryStyle
         noItemsLabel="No VMs found!"
@@ -385,7 +399,6 @@ class AssessmentDetailsContent extends React.Component<Props> {
       return null
     }
 
-    const COLUMNS_WIDTHS = ['407px', '315px', '174px']
     let items = nics.map(nic => {
       let selectedNetworkName = this.props.selectedNetworks && this.props.selectedNetworks.find(n => n.sourceNic.network_name === nic.network_name)
       if (selectedNetworkName) {
@@ -395,24 +408,26 @@ class AssessmentDetailsContent extends React.Component<Props> {
       return (
         // $FlowIgnore
         <NetworkItem key={nic.network_name}>
-          <NetworkName width={COLUMNS_WIDTHS[0]}>{nic.network_name}</NetworkName>
-          <Arrow width={COLUMNS_WIDTHS[1]} />
-          <DropdownLink
-            width={COLUMNS_WIDTHS[2]}
-            noItemsLabel="No Networks found"
-            selectItemLabel="Select Network"
-            selectedItem={selectedNetworkName}
-            onChange={item => { this.props.onNetworkChange(nic, item.network) }}
-            items={this.props.networks.map(network => ({ value: network.name || '', label: network.name || '', network }))}
-          />
+          <NetworkName width="25%">{nic.network_name}</NetworkName>
+          <ColumnStub width="25%"><Arrow /></ColumnStub>
+          <ColumnStub width="25%" />
+          <ColumnStub width="25%">
+            <DropdownLink
+              width="208px"
+              noItemsLabel="No Networks found"
+              selectItemLabel="Select Network"
+              selectedItem={selectedNetworkName}
+              onChange={item => { this.props.onNetworkChange(nic, item.network) }}
+              items={this.props.networks.map(network => ({ value: network.name || '', label: network.name || '', network }))}
+            />
+          </ColumnStub>
         </NetworkItem>
       )
     })
     return (
       <TableStyled
         items={items}
-        columnsWidths={COLUMNS_WIDTHS}
-        header={['Source Network', '', 'Target Network']}
+        header={['Source Network', '', '', 'Target Network']}
         useSecondaryStyle
       />
     )