From 163e36b5013375fd18074a39bc072fded3b90735 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Tue, 17 May 2022 17:49:25 -0700
Subject: [PATCH] improve downloads section

---
 src/ui/components/common/DownloadSection.css | 17 +++++++++++++++++
 src/ui/components/common/DownloadSection.tsx |  5 ++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/ui/components/common/DownloadSection.css b/src/ui/components/common/DownloadSection.css
index 12fc82a..0c47ded 100644
--- a/src/ui/components/common/DownloadSection.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/ui/components/common/DownloadSection.tsx b/src/ui/components/common/DownloadSection.tsx
index 0f954b9..eea7e39 100644
--- a/src/ui/components/common/DownloadSection.tsx
+++ b/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>