fix arrow btn

src/common-elements/buttons.ts

@@ -0,0 +1,30 @@
+import styled from '../styled-components';
+
+export const Button = styled.button`
+  display: inline-block;
+  vertical-align: middle;
+  border: 0;
+  padding: 0;
+  margin: 4px;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  background-color: #ebebeb;
+  cursor: pointer;
+  transition: background .15s,opacity .15s,border-color .15s;
+  white-space: nowrap;
+  border-radius: 16px;
+
+  &:hover {
+      background-color: #ccc;
+      text-decoration: none;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  @media screen and (max-width: 450px) {
+    display: none;
+  }
+`;

src/common-elements/index.ts

@@ -9,3 +9,4 @@ export * from './mixins';
 export * from './tabs';
 export * from './samples';
 export * from './perfect-scrollbar';
+export * from './buttons';

src/components/Fields/Field.tsx

@@ -13,7 +13,7 @@ import {
   PropertyRow,
 } from '../../common-elements/fields-layout';
 
-import { ShelfIcon } from '../../common-elements/';
+import { Button, ShelfIcon } from '../../common-elements/';
 
 import { FieldModel } from '../../services/models';
 import { Schema, SchemaOptions } from '../Schema/Schema';
@@ -65,7 +65,9 @@ export class Field extends React.Component<FieldProps, FieldState> {
       >
         <PropertyBullet />
         {name}
-        <ShelfIcon direction={this.state.expanded ? 'down' : 'right'} />
+        <Button>
+          <ShelfIcon direction={this.state.expanded ? 'down' : 'right'} />
+        </Button>
         {!required && <OptionalLabel> optional </OptionalLabel>}
       </ClickablePropertyNameCell>
     ) : (
@@ -85,7 +87,7 @@ export class Field extends React.Component<FieldProps, FieldState> {
           </PropertyDetailsCell>
         </tr>
         {withSubSchema && (
-          <PropertyRow className={ this.state.expanded ? 'visible' : 'hidden' } key={field.name + 'inner'} onFocus={  this.onFocus  } tabIndex={1} >
+          <PropertyRow className={this.state.expanded ? 'visible' : 'hidden'} key={field.name + 'inner'} onFocus={this.onFocus} tabIndex={1} >
             <PropertyCellWithInner colSpan={2}>
               <InnerPropertiesWrap>
                 <Schema