fix: make schema layout more responsive on small screen

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},
     &