diff --git a/webui/app/css/app.css b/webui/app/css/app.css
index 8cc7b8ab3c..e767d844d1 100644
--- a/webui/app/css/app.css
+++ b/webui/app/css/app.css
@@ -1069,49 +1069,46 @@ a.navbar-brand {
   filter: none;
 }
 
-.fileList .fileHeader {
+.filelist .fileheader {
   padding: 0.5em 0;
   border-bottom: 1px solid #ddd;
-}
-.fileList .fileHeader *{
   font-weight: bold;
+  margin-top: 0.5em,
+  margin-bottom: 0.5em
 }
-.fileList .buttons {
-  padding: 0px;
-  overflow-x: auto;
-}
-.fileList .buttons > *:not(:first-child) {
-  margin-left: 5px;
+.filelist .files {
+    max-height: 800px; /* about 20 single line files */
+    overflow-y: auto;
+    overflow-x: hidden;
 }
-.fileList .file {
+.filelist .file {
   padding: 0.5em 0;
   word-wrap: break-word;
 }
-.fileList .file .details {
+.filelist .file .details {
   margin-left: 1em;
   overflow-x: auto;
 }
-.fileList .file .details > div {
+.filelist .file .details > div {
   margin-left: 1em;
   white-space: nowrap
 }
-.fileList .file:nth-child(odd) {
+.filelist .file:nth-child(odd) {
   background-color: #f4f4f4;
 }
-.fileList .file:nth-child(even) {
+.filelist .file:nth-child(even) {
   background-color: #fafafa;
 }
-.fileList .file:hover {
+.filelist .file:hover {
   background-color: #fff;
 }
 
-.fileList .file .btn.remove {
+.filelist .file .btn.remove {
   float: right;
   color: #F45D00;
   margin-right: 1em;
-  border-color: #eee;
 }
-.fileList .file .btn.remove:hover {
+.filelist .file .btn.remove:hover {
   color: red;
 }
 
diff --git a/webui/src/components/editfiles.jsx b/webui/src/components/editfiles.jsx
index 535cc35a25..2ae52f7522 100644
--- a/webui/src/components/editfiles.jsx
+++ b/webui/src/components/editfiles.jsx
@@ -200,7 +200,7 @@ const B2DropZone = React.createClass({
     renderFiles: function() {
         return (
             <div style={{margin:'1em'}}>
-                <ol className="list-unstyled fileList" style={{textAlign:'left', minHeight:'30em'}}>
+                <ol className="list-unstyled filelist" style={{textAlign:'left', minHeight:'30em'}}>
                     <li className="heading row" style={{padding:'0.5em 0'}}>
                         <div className="col-sm-6" style={{fontWeight:'bold'}}>File Name</div>
                         <div className="col-sm-3" style={{fontWeight:'bold'}}>Size</div>
@@ -253,7 +253,6 @@ const B2DropZone = React.createClass({
 
 
 const B2SafeZone = React.createClass({
-
     getInitialState() {
         return {
             state: 'b2safe',
@@ -500,7 +499,7 @@ export const EditFiles = React.createClass({
         }
         return(
             <div className="well" style={{marginTop:'1em'}}>
-                <div className="fileList">
+                <div className="filelist">
                     <FileUploadHeader/>
                     { this.state.files.map(f =>
                         <FileUploadRow key={f.name} file={f} remove={() => this.removeUploadFile(f)} />) }
@@ -531,7 +530,7 @@ export const EditFiles = React.createClass({
         }
         return(
             <div className="well" style={{marginTop:'1em'}}>
-                <div className="fileList">
+                <div className="filelist">
                     <FileRecordHeader/>
                     { this.props.files.map(f =>
                         <FileRecordRow key={f.key} file={f} remove={()=>this.removeRecordFile(f)} />) }
@@ -587,7 +586,7 @@ export const FileUploadHeader = React.createClass({
     mixins: [React.addons.PureRenderMixin],
     render() {
         return (
-            <div className="row fileHeader" style={{marginTop:'0.5em', marginBottom:'0.5em'}}>
+            <div className="row fileheader">
                 <div className="col-sm-6">Name</div>
                 <div className="col-sm-3">Size</div>
             </div>
@@ -642,21 +641,19 @@ const FileUploadRow = React.createClass({
                         <a style={{marginLeft:'1em'}}>{file.name}</a>
                     </div>
                     <div className="col-sm-3">{humanSize(file.size)}</div>
-                    { this.props.remove ?
+                    { this.props.remove &&
                         <div className="col-sm-3">
                             <button type="button" className="btn btn-default btn-xs remove" onClick={()=>this.setState({remove:true})}>
                                 <i className="glyphicon glyphicon-remove"/>&nbsp;Cancel
                             </button>
-                        </div> : false
-                    }
+                        </div> }
                 </div>
-                { this.state.remove ?
+                { this.state.remove &&
                     <FileRemoveDialog file={file}
                                       remove={this.props.remove}
-                                      cancel={()=>this.setState({remove:false})} />
-                    : false }
-                { file.progress ? this.renderProgress(file) : false }
-                { file.error ? this.renderError(file) : false }
+                                      cancel={()=>this.setState({remove:false})} /> }
+                { file.progress && this.renderProgress(file) }
+                { file.error && this.renderError(file) }
             </div>
         );
     },
@@ -666,10 +663,10 @@ export const FileRecordHeader = React.createClass({
     mixins: [React.addons.PureRenderMixin],
     render() {
         return (
-            <div className="row fileHeader" style={{marginTop:'0.5em', marginBottom:'0.5em'}}>
+            <div className="row fileheader">
                 <div className="col-sm-8">Name</div>
-                <div className="col-sm-2 p-0">Size</div>
-                <div className="col-sm-2 p-0">{/*Actions*/}</div>
+                <div className="col-sm-1 p-0">Size</div>
+                <div className="col-sm-3 p-0">{/*Actions*/}</div>
             </div>
         );
     }
@@ -715,7 +712,7 @@ export const FileRecordRow = React.createClass({
                             style={{fontSize:10}} aria-hidden="true"/>
                         <span className={"glyphicon glyphicon-file"}
                             style={{marginLeft:'0.5em', fontSize:10}} aria-hidden="true"/>
-                        <a style={{display:'inline-block', marginLeft:'0.5em'}} 
+                        <a style={{display:'inline-block', marginLeft:'0.5em'}}
                             onClick={e => {
                                 this.props.catchMatomoEvent(new Event('filedownload'));
                                 e.stopPropagation();
@@ -734,11 +731,12 @@ export const FileRecordRow = React.createClass({
                             </span> : null
                         }
                     </div>
-                    <div className={"col-sm-"+(this.props.remove? "1":"2")} style={{padding: '0px'}} onClick={e => this.setState({open:!this.state.open})}>{
+                    <div className="col-sm-1" style={{padding: '0px'}} onClick={e => this.setState({open:!this.state.open})}>{
                         file.b2safe ?
                         "-" : humanSize(file.size)
                     }</div>
-                    <div className="col-sm-2 buttons">
+                    <div className="col-sm-3">
+                        <div className="btn-group" role="group" aria-label="...">
                             { this.props.b2noteWidget }
                             { !file.checksum ? false :
                             <button type="button" className="btn btn-default btn-xs" onClick={() => this.copyIdentifier(file.checksum, 'File checksum')} title="Copy checksum to clipboard">
@@ -749,31 +747,28 @@ export const FileRecordRow = React.createClass({
                                 <i className="glyphicon glyphicon-globe"/>
                             </button> }
                             { !this.props.remove ? false :
-                            <button type="button" className="btn btn-default btn-xs remove" onClick={()=>this.setState({remove:true})} title="Delete">
+                            <button type="button" className="btn btn-default btn-xs remove" onClick={()=>this.setState({remove:true})} title="Delete this file">
                                 <i className="glyphicon glyphicon-remove"/>
                             </button> }
+                        </div>
                     </div>
                 </div>
-                { allowDetails && this.state.open ?
+                { allowDetails && this.state.open &&
                     <div className="details">
-                        { file.checksum ?
+                        { file.checksum &&
                             <div>
-                                Checksum:
-                                <PersistentIdentifier style={{marginLeft:'0.2em'}} pid={file.checksum} />
-                            </div>
-                            : false }
-                        { file.ePIC_PID ?
+                            Checksum: <PersistentIdentifier style={{marginLeft:'0.2em'}} pid={file.checksum} />
+                            </div> }
+                        { file.ePIC_PID &&
                             <div>
                             PID: <PersistentIdentifier style={{marginLeft:'0.2em'}} pid={file.ePIC_PID} />
-                            </div>
-                            : false }
-                    </div> : false }
+                            </div> }
+                    </div> }
 
-                { this.props.remove && this.state.remove ?
+                { this.props.remove && this.state.remove &&
                     <FileRemoveDialog file={file}
                                       remove={this.props.remove}
-                                      cancel={()=>this.setState({remove:false})} />
-                    : false }
+                                      cancel={()=>this.setState({remove:false})} /> }
             </div>
         );
     },
diff --git a/webui/src/components/newrecord.jsx b/webui/src/components/newrecord.jsx
index 95c9a87b4e..10caee0694 100644
--- a/webui/src/components/newrecord.jsx
+++ b/webui/src/components/newrecord.jsx
@@ -137,7 +137,7 @@ export const NewRecordRoute = React.createClass({
                         </div>
                     </form>
                 </div>
-                <div className="row buttons">
+                <div className="row">
                     <div className="col-sm-9 col-sm-offset-3">
                         <p className="alert alert-warning" style={{color:'black'}}>
                         You can also update the data in an existing record by creating a new version of that record.
diff --git a/webui/src/components/record.jsx b/webui/src/components/record.jsx
index cdde95b324..314cc9a496 100644
--- a/webui/src/components/record.jsx
+++ b/webui/src/components/record.jsx
@@ -100,7 +100,7 @@ const B2NoteWidget = React.createClass({
         }
 
         return (
-            <form id="b2note_form_" action={this.props.b2noteUrl + '/widget'} method="post" target="b2note_iframe" style={{display: 'inline-block'}} onSubmit={this.handleSubmit}>
+            <form id="b2note_form_" action={this.props.b2noteUrl + '/widget'} className="btn btn-xs" method="post" target="b2note_iframe" style={{padding: '0px', border: '0px'}} onSubmit={this.handleSubmit}>
                 <input type="hidden" name="recordurl_tofeed" value={record_url} className="field left" readOnly="readonly"/>
                 <input type="hidden" name="pid_tofeed" value={pid} className="field left" readOnly="readonly"/>
                 <input type="hidden" name="subject_tofeed" value={object_url} className="field left" readOnly="readonly"/>
@@ -367,9 +367,11 @@ const Record = React.createClass({
                 return <FileRecordRow key={f.get('key')} file={f} b2noteWidget={b2noteWidget} showDownloads={showDownloads} catchMatomoEvent={this.catchMatomoEvent} />
             }
             fileComponent =
-                <div className='fileList'>
+                <div className='filelist'>
                     <FileRecordHeader/>
+                    <div className='files'>
                     { files.map(fileRecordRowFn) }
+                    </div>
                 </div>;
         }
         return (
diff --git a/webui/src/data/misc.js b/webui/src/data/misc.js
index e1f4510f8b..c49a146853 100644
--- a/webui/src/data/misc.js
+++ b/webui/src/data/misc.js
@@ -42,15 +42,15 @@ export function humanSize(sz) {
     let K = 1000, M = K*K, G = K*M, T = K*G;
 
     if (sz < K) {
-        return [sz,'B '];
+        return [sz,' B'];
     } else if (sz < M) {
-        return [(sz/K).toFixed(2), 'KB'];
+        return [(sz/K).toFixed(2), ' KB'];
     } else if (sz < G) {
-        return [(sz/M).toFixed(2), 'MB'];
+        return [(sz/M).toFixed(2), ' MB'];
     } else if (sz < T) {
-        return [(sz/G).toFixed(2), 'GB'];
+        return [(sz/G).toFixed(2), ' GB'];
     } else {
-        return [(sz/T).toFixed(2), 'TB'];
+        return [(sz/T).toFixed(2), ' TB'];
     }
 }