diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts index 533ccb01..34f20a1c 100644 --- a/src/common-elements/fields-layout.ts +++ b/src/common-elements/fields-layout.ts @@ -1,6 +1,6 @@ // import { transparentize } from 'polished'; -import styled, { extensionsHook } from '../styled-components'; +import styled, { extensionsHook, media } from '../styled-components'; import { deprecatedCss } from './mixins'; export const PropertiesTableCaption = styled.caption` @@ -16,6 +16,11 @@ export const PropertyCell = styled.td<{ kind?: string }>` position: relative; padding: 10px 10px 10px 0; + ${media.lessThan('small')` + display: block; + overflow: hidden; + `} + tr:first-of-type > &, tr.last > & { border-left-width: 0; @@ -63,7 +68,7 @@ export const PropertyNameCell = styled(PropertyCell)` line-height: 20px; white-space: nowrap; font-size: 13px; - font-family: ${props => props.theme.typography.code.fontFamily}; + font-family: ${(props) => props.theme.typography.code.fontFamily}; &.deprecated { ${deprecatedCss}; @@ -77,12 +82,22 @@ export const PropertyNameCell = styled(PropertyCell)` export const PropertyDetailsCell = styled.td` border-bottom: 1px solid #9fb4be; padding: 10px 0; - width: ${props => props.theme.schema.defaultDetailsWidth}; + width: ${(props) => props.theme.schema.defaultDetailsWidth}; box-sizing: border-box; tr.expanded & { border-bottom: none; } + + ${media.lessThan('small')` + padding: 0 20px; + border-bottom: none; + border-left: 1px solid ${(props) => props.theme.schema.linesColor}; + + tr.last > & { + border-left: none; + } + `} `; export const PropertyBullet = styled.span` @@ -125,6 +140,13 @@ export const PropertiesTable = styled.table` vertical-align: middle; } + ${media.lessThan('small')` + display: block; + > tr, > tbody, tr { + display: block; + } + `} + & ${InnerPropertiesWrap}, &