diff --git a/src/components/specific_challenge/Table.js b/src/components/specific_challenge/Table.js index 7f34fc0..6aed3d3 100644 --- a/src/components/specific_challenge/Table.js +++ b/src/components/specific_challenge/Table.js @@ -7,6 +7,10 @@ import { Body, Medium } from '../../utils/fonts'; import styled from 'styled-components'; import ColumnFilterIcon from './ColumnFilterIcon'; +const TableStyle = styled(FlexColumn)` + overflow-x: ${({metrics}) => metrics > 10 ? 'scroll' : 'auto'}; +`; + const Line = styled(FlexRow)` position: absolute; top: ${({ top }) => (top ? top : 'auto')}; @@ -105,7 +109,7 @@ const Table = (props) => { as="td" order={props.iterableColumnElement.order} textAlign={props.iterableColumnElement.align} - minWidth="72px" + minWidth="88px" margin="auto 0" overflowWrap="anywhere" > @@ -133,6 +137,7 @@ const Table = (props) => { order={elemName.order} textAlign={elemName.align} margin="auto 0" + minWidth="88px" overflowWrap="anywhere" > {IS_MOBILE() && ( @@ -153,7 +158,7 @@ const Table = (props) => { let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2); if (elementsToMap.length > 0) { return ( - + { width={elem === 'when' ? '100%' : 'auto'} padding="0 4px 0 0" overflowWrap="anywhere" - minWidth={elem === 'result' ? '72px' : 'none'} + minWidth="72px" + + // minWidth={elem === 'result' ? '72px' : 'none'} > {elem.replace('.', ' ')} @@ -233,7 +240,7 @@ const Table = (props) => { ); })} - + ); } return No results ;c;