From 8e903891220840fca0b67f6c6f3331d2cf044716 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 2 Dec 2016 03:02:20 -0500
Subject: [PATCH] Layout tweak to "Download Succeeded" Modal

This displays the file path on its own line and does character-level
wrapping on the path only.

Ideally, we would just apply character wrapping to all words that are
too long for their line. There are CSS props for that but I haven't
been able to find a reliable way to do it without setting a width on the
outer container, which we don't want here (modals stretch based on their content). So this is the best compromise I can come up with.
---
 js/component/link.js | 5 +++--
 scss/_gui.scss       | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/js/component/link.js b/js/component/link.js
index 8f9b8cde7..9cb92aa6e 100644
--- a/js/component/link.js
+++ b/js/component/link.js
@@ -135,8 +135,9 @@ var DownloadLink = React.createClass({
       <span className="button-container">
         <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
               disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />
-        <Modal isOpen={this.state.modal == 'downloadStarted'} onConfirmed={this.closeModal}>
-          Downloading to {this.state.filePath}
+        <Modal className="download-started-modal" isOpen={this.state.modal == 'downloadStarted'} onConfirmed={this.closeModal}>
+          <p>Downloading to:</p>
+          <div className="download-started-modal__file-path">{this.state.filePath}</div>
         </Modal>
         <Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
           You don't have enough LBRY credits to pay for this stream.
diff --git a/scss/_gui.scss b/scss/_gui.scss
index 291afd375..f37792045 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -351,4 +351,8 @@ input[type="text"], input[type="search"]
 .error-modal__warning-symbol {
   margin-top: 6px;
   margin-right: 7px;
+}
+
+.download-started-modal__file-path {
+  word-break: break-all;
 }
\ No newline at end of file