Fixed some layout issues

modules/client/browse/ContentArea.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+
+const maxWidth = 700;
+
+export function ContentArea({ children, css }) {
+  return (
+    <div
+      css={{
+        border: '1px solid #dfe2e5',
+        borderRadius: 3,
+        [`@media (max-width: ${maxWidth}px)`]: {
+          borderRightWidth: 0,
+          borderLeftWidth: 0
+        },
+        ...css
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ContentAreaHeaderBar({ children, css }) {
+  return (
+    <div
+      css={{
+        padding: 10,
+        background: '#f6f8fa',
+        color: '#424242',
+        border: '1px solid #d1d5da',
+        borderTopLeftRadius: 3,
+        borderTopRightRadius: 3,
+        margin: '-1px -1px 0',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        [`@media (max-width: ${maxWidth}px)`]: {
+          paddingRight: 20,
+          paddingLeft: 20
+        },
+        ...css
+      }}
+    >
+      {children}
+    </div>
+  );
+}