fix list creating/editing

react/src/components/lists/ListActions.js

@@ -87,7 +87,7 @@ export default function ListActions({
         config={config.stiff}
         keys={actions.map(action => action({}).key)}
         from={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
-        enter={{ opacity: 1, height: 30 }}
+        enter={{ opacity: 1, height: 30, margin: 0, padding: 0 }}
         leave={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
       >
         {actions}

react/src/components/lists/Selector.css

@@ -5,6 +5,8 @@
   align-self: center;
   background-color: #fbfbfb;
   flex-grow: 1;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 #listselector input {
@@ -17,7 +19,6 @@
   background-color: #fbfbfb;
   border-bottom: 1px solid #888888;
   width: 80%;
-  margin: 1rem 0;
 }
 
 #listselector button {

react/src/components/lists/Selector.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Select, MenuItem } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import CheckIcon from '@material-ui/icons/Check';
-import { animated, Transition } from 'react-spring';
+import { Transition, config } from 'react-spring';
 
 import './Selector.css';
 
@@ -31,6 +31,7 @@ export default function Selector({
       <div id="listselector" className="list--input">
         <Transition
           native
+          config={config.stiff}
           from={{ paddingBottom: 18 }}
           enter={{ paddingBottom: 0 }}
           leave={{ paddingBottom: 18 }}
@@ -51,12 +52,13 @@ export default function Selector({
             />
           )}
         </Transition>
-        <animated.button
+        <button
           style={button}
+          type="submit"
           onClick={() => input.value.trim() && addList(input.value)}
         >
           <AddIcon style={icon} />
-        </animated.button>
+        </button>
       </div>
     );
   }
@@ -65,7 +67,7 @@ export default function Selector({
     return (
       <div id="listselector" className="list--input">
         <Transition
-          native
+          config={config.stiff}
           from={{ paddingBottom: 18 }}
           enter={{ paddingBottom: 0 }}
           leave={{ paddingBottom: 18 }}
@@ -87,12 +89,13 @@ export default function Selector({
             />
           )}
         </Transition>
-        <animated.button
+        <button
           style={button}
+          type="submit"
           onClick={() => input.value.trim() && editList(input.value)}
         >
           <CheckIcon style={icon} />
-        </animated.button>
+        </button>
       </div>
     );
   }