fix(overmind-devtools): fix scrolling of action

Author: christianalfoni

packages/node_modules/overmind-devtools/src/components/Action/elements.tsx

@@ -3,6 +3,7 @@ import styled from '../../styled-components'
 export const Wrapper = styled.div`
   padding: ${({ theme }) => theme.padding.normal};
   background-color: ${({ theme }) => theme.color.fade(theme.color.white, 0.1)};
+  overflow-y: scroll;
 `
 
 export const Container = styled.div`
@@ -14,3 +15,20 @@ export const Pipe = styled.div`
   align-items: center;
   margin: ${({ theme }) => `${theme.padding.small} 0`};
 `
+
+export const ExpandAll = styled<
+  {
+    isActive: boolean
+  },
+  'div'
+>('div')`
+  display: flex;
+  justify-content: flex-end;
+  font-size: ${({ theme }) => theme.fontSize.small};
+  cursor: pointer;
+  color: ${({ theme }) => theme.color.black};
+  opacity: ${({ isActive }) => (isActive ? '1' : '0.5')};
+  :hover {
+    opacity: ${({ isActive }) => (isActive ? '1' : '0.75')};
+  }
+`

packages/node_modules/overmind-devtools/src/components/Action/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Connect, connect } from '../../app'
-import { Wrapper, Container } from './elements'
+import { Wrapper, Container, ExpandAll } from './elements'
 import Operator from '../ActionOperator'
 import Flush from '../ActionFlush'
 import { getActionId, getOperatorId } from '../../app/utils'
@@ -16,6 +16,12 @@ const Action: React.SFC<Connect> = ({ app }) => {
   return (
     <Wrapper>
       <Container>
+        <ExpandAll
+          isActive={app.state.expandAllActionDetails}
+          onClick={() => app.actions.toggleExpandAllActions()}
+        >
+          expand all
+        </ExpandAll>
         {app.state.currentAction.operators.map((operator, index) => {
           const prevOperator = app.state.currentAction.operators[index - 1]
           const value =

packages/node_modules/overmind-devtools/src/components/Actions/elements.tsx

@@ -18,22 +18,3 @@ export const CenterWrapper = styled.div`
   align-items: center;
   justify-content: center;
 `
-
-export const ExpandAll = styled<
-  {
-    isActive: boolean
-  },
-  'div'
->('div')`
-  display: flex;
-  position: absolute;
-  top: 10px;
-  right: ${({ theme }) => theme.padding.normal};
-  font-size: ${({ theme }) => theme.fontSize.small};
-  cursor: pointer;
-  color: ${({ theme }) => theme.color.black};
-  opacity: ${({ isActive }) => (isActive ? '1' : '0.5')};
-  :hover {
-    opacity: ${({ isActive }) => (isActive ? '1' : '0.75')};
-  }
-`

packages/node_modules/overmind-devtools/src/components/Actions/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import ActionsList from '../ActionsList'
 import Action from '../Action'
-import { Wrapper, CenterWrapper, ExpandAll } from './elements'
+import { Wrapper, CenterWrapper } from './elements'
 import { Connect, connect } from '../../app'
 import Text from '../common/Text'
 
@@ -16,12 +16,6 @@ const Actions: React.SFC<Connect> = ({ app }) => {
 
   return (
     <Wrapper>
-      <ExpandAll
-        isActive={app.state.expandAllActionDetails}
-        onClick={() => app.actions.toggleExpandAllActions()}
-      >
-        expand all
-      </ExpandAll>
       <ActionsList />
       <Action />
     </Wrapper>