feat(tpl): prevent upload label wrap at 50% width

Uploading label use CSS `left 50%; transform: translate(-50%, -50%)` to
make center aligned, which results line wrap at 50% width since the line
reached the end of the container(caused by left:50%).

Use inline block align center instead.

Author: marjune163

src/tpl/frontend/index.css

@@ -210,26 +210,36 @@ html.dragging::before {
 	pointer-events: none;
 }
 
+.upload-status > *,
 .upload-status.uploading,
 .upload-status.failed {
 	visibility: visible;
 }
 
 .upload-status .label {
 	position: absolute;
-	left: 50%;
-	top: 100%;
+	left: 0;
+	top: 0;
+	width: 100%;
+	color: #fff;
+	text-align: center;
 	opacity: 0;
-	transform: translate(-50%, -50%);
 	transition: transform .2s, opacity .2s;
+}
+
+.upload-status .label .content {
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+	text-align: left;
+	text-align: start;
 	padding: 0.5em 1em;
-	color: #fff;
 	box-sizing: border-box;
-	max-width: 100%;
 	overflow-wrap: break-word;
+	word-break: break-word;
 }
 
-.upload-status .label.tips {
+.upload-status .info .content {
 	padding-left: 2.5em;
 	background: #c9c;
 	background-color: rgba(204, 153, 204, 0.8);
@@ -244,8 +254,8 @@ html.dragging::before {
 	}
 }
 
-.upload-status .label.tips:before,
-.upload-status .label.tips:after {
+.upload-status .info .content:before,
+.upload-status .info .content:after {
 	content: '';
 	position: absolute;
 	left: 1em;
@@ -258,19 +268,19 @@ html.dragging::before {
 	animation: wheel 1s linear infinite;
 }
 
-.upload-status .label.tips:after {
+.upload-status .info .content:after {
 	border-color: currentColor transparent transparent transparent;
 }
 
-.upload-status .label.failed {
+.upload-status .warn .content {
 	background: #800000;
 	background-color: rgba(128, 0, 0, 0.8);
 }
 
-.upload-status.uploading .label.tips,
-.upload-status.failed .label.failed {
+.upload-status.uploading .info,
+.upload-status.failed .warn {
 	opacity: 1;
-	transform: translate(-50%, 10%);
+	transform: translateY(25%);
 }
 
 .upload-status .progress {

src/tpl/frontend/index.html

@@ -24,8 +24,12 @@
 
 {{if .CanUpload}}
 <div class="upload-status">
-	<span class="label tips">{{.Trans.UploadingLabel}}</span>
-	<span class="label failed">{{.Trans.UploadFailLabel}}<span class="message"></span></span>
+	<span class="label info">
+		<span class="content">{{.Trans.UploadingLabel}}</span>
+	</span>
+	<span class="label warn">
+		<span class="content">{{.Trans.UploadFailLabel}}<span class="message"></span></span>
+	</span>
 	<span class="progress"></span>
 </div>
 {{end}}

src/tpl/frontend/index.js

@@ -801,7 +801,7 @@
 			var classFailed = 'failed';
 			var elUploadStatus = document.body.querySelector('.upload-status');
 			var elProgress = elUploadStatus && elUploadStatus.querySelector('.progress');
-			var elFailedMessage = elUploadStatus && elUploadStatus.querySelector('.failed .message');
+			var elFailedMessage = elUploadStatus && elUploadStatus.querySelector('.warn .message');
 
 			function onComplete() {
 				if (elProgress) {