responsive data browser (#8041)

frontend/src/metabase/components/BrowseApp.jsx

@@ -21,6 +21,9 @@ export const DatabaseListLoader = props => (
   <EntityListLoader entityType="databases" {...props} />
 );
 
+const PAGE_PADDING = [1, 2, 4];
+const ITEM_WIDTHS = [1, 1 / 2, 1 / 3];
+
 const SchemaListLoader = ({ dbId, ...props }) => (
   <EntityListLoader entityType="schemas" entityQuery={{ dbId }} {...props} />
 );
@@ -63,7 +66,7 @@ export class SchemaBrowser extends React.Component {
                 </Box>
                 <Grid>
                   {schemas.map(schema => (
-                    <GridItem w={1 / 3}>
+                    <GridItem w={ITEM_WIDTHS}>
                       <Link
                         to={`/browse/${dbId}/schema/${schema.name}`}
                         mb={1}
@@ -121,7 +124,7 @@ export class TableBrowser extends React.Component {
                     }).getUrl();
 
                     return (
-                      <GridItem w={1 / 3}>
+                      <GridItem w={ITEM_WIDTHS}>
                         <Card
                           hoverable
                           px={1}
@@ -183,7 +186,7 @@ export class TableBrowser extends React.Component {
 
 export class BrowseApp extends React.Component {
   render() {
-    return <Box mx={4}>{this.props.children}</Box>;
+    return <Box mx={PAGE_PADDING}>{this.props.children}</Box>;
   }
 }
 
@@ -199,7 +202,7 @@ export class DatabaseBrowser extends React.Component {
             return (
               <Grid>
                 {databases.map(database => (
-                  <GridItem>
+                  <GridItem w={ITEM_WIDTHS}>
                     <Link to={`browse/${database.id}`}>
                       <Card p={3} hover={{ color: normal.blue }}>
                         <Icon name="database" color={normal.grey2} mb={3} />