From 18b4f3e33bf7cb601437e5f0eb687a99656523e7 Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Wed, 19 May 2021 00:01:27 +0800
Subject: [PATCH] ui: fix display issue

---
 packages/ui-default/components/problem/tag.page.styl |  1 +
 packages/ui-default/misc/immersive.styl              |  2 +-
 packages/ui-default/package.json                     |  2 +-
 packages/ui-default/pages/problem_files.page.js      | 10 +++++-----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/ui-default/components/problem/tag.page.styl b/packages/ui-default/components/problem/tag.page.styl
index f3f7e2b9f..f248977de 100644
--- a/packages/ui-default/components/problem/tag.page.styl
+++ b/packages/ui-default/components/problem/tag.page.styl
@@ -14,6 +14,7 @@
 .problem__tag-item
   padding: rem(0px)
   margin-left: rem(3px)
+  margin-bottom: rem(2px)
   &:hover
     text-decoration: none
 
diff --git a/packages/ui-default/misc/immersive.styl b/packages/ui-default/misc/immersive.styl
index 862ed8000..f0012c4ca 100644
--- a/packages/ui-default/misc/immersive.styl
+++ b/packages/ui-default/misc/immersive.styl
@@ -14,7 +14,7 @@
 
 +above(rupture.mobile-cutoff)
   .immersive--center
-    width: 200px
+    width: 230px
     margin: 0 auto
 
 .immersive--center
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index 56f04f5d3..326831e76 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.8.26",
+  "version": "4.8.27",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/pages/problem_files.page.js b/packages/ui-default/pages/problem_files.page.js
index 5a7be0d10..8da5de784 100644
--- a/packages/ui-default/pages/problem_files.page.js
+++ b/packages/ui-default/pages/problem_files.page.js
@@ -89,13 +89,13 @@ const page = new NamedPage('problem_files', () => {
       window.addEventListener('beforeunload', onBeforeUnload);
       const dialog = new Dialog({
         $body: `\
-          <div class="upload-label" style="text-align: center;margin-bottom: 8px;color: gray;"></div>
-          <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
-            <div class="upload-progress bp3-progress-meter" style="width: 0"></div>
-          </div>
           <div class="file-label" style="text-align: center;margin: 5px 0;color: gray;font-size: small;"></div>
           <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
             <div class="file-progress bp3-progress-meter" style="width: 0"></div>
+          </div>
+          <div class="upload-label" style="text-align: center;margin-bottom: 8px;color: gray;"></div>
+          <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
+            <div class="upload-progress bp3-progress-meter" style="width: 0"></div>
           </div>`,
       });
       dialog.open();
@@ -116,7 +116,7 @@ const page = new NamedPage('problem_files', () => {
             const xhr = new XMLHttpRequest();
             xhr.upload.addEventListener('loadstart', () => {
               $fileLabel.text(`[${+i + 1}/${files.length}] ${file.name}`);
-              $fileProgress.width(`${Math.round((+i + 1) / file.length * 100)}%`);
+              $fileProgress.width(`${Math.round((+i + 1) / files.length * 100)}%`);
               $uploadLabel.text(i18n('Uploading... ({0}%)', 0));
               $uploadProgress.width(0);
             });