From ad31c3229e19dcd2b6da59e892980ae5e9ca6400 Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Wed, 19 Feb 2020 18:09:30 +0100
Subject: [PATCH] fixes overflowing of long unbreakable file names on mobile

---
 src/components/UploadFile/UploadFile.scss | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/UploadFile/UploadFile.scss b/src/components/UploadFile/UploadFile.scss
index 1faa238b..30fa24e9 100644
--- a/src/components/UploadFile/UploadFile.scss
+++ b/src/components/UploadFile/UploadFile.scss
@@ -4,13 +4,18 @@
   display: flex;
   align-items: center;
   padding: 20px 0;
+  flex-wrap: wrap;
 }
 
 .upload-file-icon {
-  display: block;
-  min-width: 36px;
-  width: 36px;
-  max-width: 36px;
+  display: none;
+
+  @media (min-width: $largebp) {
+    display: block;
+    min-width: 36px;
+    width: 36px;
+    max-width: 36px;
+  }
 }
 
 .upload-file-text {
@@ -22,6 +27,7 @@
     margin-bottom: 5px;
     font-size: 16px;
     font-weight: 400;
+    word-break: break-all;
 
     @media (min-width: $largebp) {
       font-size: 18px;
@@ -38,7 +44,7 @@
   }
 
   .url {
-    word-break: break-word;
+    word-break: break-all;
 
     &:hover {
       text-decoration: underline;
@@ -54,6 +60,11 @@
 .upload-file-copy {
   position: relative;
 
+  @media (max-width: $largebp) {
+    flex-basis: 100%;
+    text-align: right;
+  }
+
   &:hover {
     color: $green;
   }