diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts index 34f20a1c..e6985f15 100644 --- a/src/common-elements/fields-layout.ts +++ b/src/common-elements/fields-layout.ts @@ -142,11 +142,18 @@ export const PropertiesTable = styled.table` ${media.lessThan('small')` display: block; - > tr, > tbody, tr { + > tr, > tbody > tr { display: block; } `} + ${media.lessThan('small', false, ' and (-ms-high-contrast:none)')` + td { + float: left; + width: 100%; + } + `} + & ${InnerPropertiesWrap}, & diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx index ef1bcaab..3a52ad81 100644 --- a/src/components/SecurityRequirement/SecurityRequirement.tsx +++ b/src/components/SecurityRequirement/SecurityRequirement.tsx @@ -85,7 +85,7 @@ export class SecurityRequirement extends React.PureComponent; export const media = { - lessThan(breakpoint, print?: boolean) { + lessThan(breakpoint, print?: boolean, extra?: string) { return (...args) => css` @media ${print ? 'print, ' : ''} screen and (max-width: ${props => - props.theme.breakpoints[breakpoint]}) { + props.theme.breakpoints[breakpoint]})${extra || ''} { ${(css as any)(...args)}; } `;