diff --git a/ui-admin/src/js/components/common/form/Header.jsx b/ui-admin/src/js/components/common/form/Header.jsx
index f206012c13c139025d74367d20b519c8c637514b..6c555c429fbd67c0f268dbc0cb365c54c9673dc0 100644
--- a/ui-admin/src/js/components/common/form/Header.jsx
+++ b/ui-admin/src/js/components/common/form/Header.jsx
@@ -25,17 +25,19 @@ class Header extends React.PureComponent {
     const { styles, classes, size } = this.props
 
     let variant = null
-    let className = null
+    let className = this.props.className;
 
-    if (size === 'big') {
-      variant = 'h5'
-      className = classes.big
-    } else if (size === 'medium') {
-      variant = 'h6'
-      className = classes.medium
-    } else if (size === 'small') {
-      variant = 'subtitle1'
-      className = classes.small
+    if (!className) {
+      if (size === 'big') {
+        variant = 'h5'
+        className = classes.big
+      } else if (size === 'medium') {
+        variant = 'h6'
+        className = classes.medium
+      } else if (size === 'small') {
+        variant = 'subtitle1'
+        className = classes.small
+      }
     }
 
     return (
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
index 52481ddeaf65100954a5b9b6975da723bc494384..ea818cb3d315a182f14ed68dd31465922536d430 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -51,7 +51,6 @@ const styles = theme => ({
   content: {
     flex: '1 1 100%',
     height: 0,
-    overflowY: 'hidden'
   },
   nameCell: {
     display: 'flex',
diff --git a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
index 2024f8dcebc3baad10a1a2ef77760dcf45bfdda9..ef4711e56fef5aa76c6630b478c30fcc77dd3055 100644
--- a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
+++ b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
@@ -23,17 +23,28 @@ import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
 import TableRow from '@material-ui/core/TableRow'
-import Header from '@src/js/components/common/form/Header.jsx';
-import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx';
-import { withStyles } from "@material-ui/core/styles";
+import Header from '@src/js/components/common/form/Header.jsx'
+import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx'
+import { withStyles } from '@material-ui/core/styles'
 
 const styles = () => ({
   container: {
-    position: 'sticky'
+    position: 'sticky',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    width: '24rem'
   },
   icon: {
     verticalAlign: 'middle',
     fontSize: '12rem'
+  },
+  fileName: {
+    whiteSpace: 'nowrap',
+    '& *': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
   }
 })
 
@@ -53,7 +64,9 @@ class InfoPanel extends React.Component {
     // TODO: extract strings to messages
     return (file &&
       <Container className={classes.container}>
-        <Header size='big'>{file.name}</Header>
+        <span className={classes.fileName}>
+          <Header size='big'>{file.name}</Header>
+        </span>
         <ItemIcon file={file} classes={classes} configuration={configuration} />
         <Table>
           <TableBody>