Merge pull request #8868 from joesitton/fix-filename-too-long

[FIX] long filename overlaps cancel button in progress bar

packages/rocketchat-theme/client/imports/general/base_old.css

@@ -2203,9 +2203,15 @@
 			right: 0;
 			left: 0;
 
+			overflow: hidden;
+
+			width: 50%;
+
 			height: 100%;
 			padding: 0 10px;
 
+			text-overflow: ellipsis;
+
 			& > a {
 				float: right;
 
@@ -2215,6 +2221,9 @@
 		}
 
 		& button {
+			position: relative;
+			z-index: 3;
+
 			float: right;
 
 			text-transform: uppercase;

packages/rocketchat-ui/client/views/app/room.html

@@ -83,18 +83,18 @@
 									{{#if error}}
 										<div class="upload-progress-text">
 											{{error}}
-											<button>
-												{{_ "close"}}
-											</button>
 										</div>
+										<button>
+											{{_ "close"}}
+										</button>
 									{{else}}
 										<div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
 										<div class="upload-progress-text">
-											{{name}}... {{percentage}}%
-											<button>
-												{{_ "Cancel"}}
-											</button>
+											[{{percentage}}%] {{name}}
 										</div>
+										<button>
+											{{_ "Cancel"}}
+										</button>
 									{{/if}}
 								</div>
 							{{/each}}