fix: make schema layout more responsive on small screen (#1411)

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,20 @@ export const PropertiesTable = styled.table`
     vertical-align: middle;
   }
 
+  ${media.lessThan('small')`
+    display: block;
+    > tr, > tbody > tr {
+      display: block;
+    }
+  `}
+
+  ${media.lessThan('small', false, ' and (-ms-high-contrast:none)')`
+    td {
+      float: left;
+      width: 100%;
+    }
+  `}
+
   &
     ${InnerPropertiesWrap},
     &

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -1,7 +1,7 @@
 // import { transparentize } from 'polished';
 import * as React from 'react';
 
-import styled from '../../styled-components';
+import styled, { media } from '../../styled-components';
 
 import { Link, UnderlinedHeader } from '../../common-elements/';
 import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
@@ -85,11 +85,14 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
 }
 
 const AuthHeaderColumn = styled.div`
-  flex: 1;
+  flex: 1 1 auto;
 `;
 
 const SecuritiesColumn = styled.div`
   width: ${props => props.theme.schema.defaultDetailsWidth};
+  ${media.lessThan('small')`
+    margin-top: 10px;
+  `}
 `;
 
 const AuthHeader = styled(UnderlinedHeader)`
@@ -101,6 +104,10 @@ const Wrap = styled.div`
   width: 100%;
   display: flex;
   margin: 1em 0;
+
+  ${media.lessThan('small')`
+    flex-direction: column;
+  `}
 `;
 
 export interface SecurityRequirementsProps {

src/styled-components.ts

@@ -13,10 +13,10 @@ const {
 } = styledComponents as styledComponents.ThemedStyledComponentsModule<ResolvedThemeInterface>;
 
 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)};
       }
     `;