improve downloads section

src/ui/components/common/DownloadSection.css

@@ -9,4 +9,21 @@
 .DownloadSection {
   overflow: hidden;
   width: 100%;
+
+  margin: 6px 0px;
+}
+
+.DownloadTitle {
+  display: flex;
+  flex-direction: row;
+}
+
+.DownloadPath {
+  text-overflow: ellipsis;
+  width: 250px;
+  overflow: hidden;
+}
+
+.DownloadStatus {
+  text-align: right;
 }

src/ui/components/common/DownloadSection.tsx

@@ -21,7 +21,10 @@ export default class DownloadSection extends React.Component<IProps, never> {
   render() {
     return (
       <div className="DownloadSection">
-        <span>{this.getFilenameFromPath()} - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</span>
+        <div className="DownloadTitle">
+          <div className="DownloadPath">{this.getFilenameFromPath()}</div>
+          <div className="DownloadStatus"> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
+        </div>
         <div className="DownloadSectionInner">
           <ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} />
         </div>