Fix List component styling

website/src/ui/List.js

@@ -6,32 +6,26 @@ import { sizeInfo, colorInfo, fontInfo } from './style'
 
 class List extends Component {
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
+    // data: PropTypes.array,
+    // render: PropTypes.func,
   }
 
   render() {
     const { children } = this.props
 
     return (
-      <div style={{
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        fontSize: fontInfo.size.large,
-        fontFamily: fontInfo.family,
-      }}>
-        <Box
-          border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
-          radius={sizeInfo.formBoxRadius}>
-          <div style={{
-            height: '100%',
-            width: '100%',
-            overflowY: 'scroll',
-          }}>
-            {children}
-          </div>
-        </Box>
-      </div>
+      <Box
+        border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
+        radius={sizeInfo.formBoxRadius} style={{
+          position: 'absolute',
+          overflowY: 'hidden',
+          fontSize: fontInfo.size.large,
+          fontFamily: fontInfo.family,
+          overflow: 'scroll',
+        }}>
+        {children}
+      </Box>
     )
   }
 }
@@ -48,7 +42,7 @@ List.Item = Radium(class ListItem extends Component {
 
     return (
       <div style={{
-        display: 'table-row',
+        width: '100%',
         background: active ? colorInfo.listBackgroundActive : 'transparent',
         ':hover': {
           background: colorInfo.listBackgroundHover
@@ -72,7 +66,6 @@ List.Icon = Radium(class ListIcon extends Component {
 
     return (
       <img src={source} style={{
-        display: 'table-cell',
         verticalAlign: 'middle',
         width: size,
         height: size,
@@ -91,11 +84,8 @@ List.Text = Radium(class ListText extends Component {
 
     return (
       <span style={{
-        display: 'table-cell',
-        width: '100%',
         color: fontInfo.color.normal,
         align: 'left',
-        verticalAlign: 'middle',
         textAlign: 'left',
         cursor: 'default',
       }}>{children}</span>