From 8132a029f5aa8bbcbf8c1b258cd95bac3ecf118e Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Mon, 25 Nov 2019 11:15:10 +0100
Subject: [PATCH] Improve progress bar layout

---
 client/modules/IDE/components/AssetSize.jsx | 12 ++++++------
 client/styles/components/_asset-size.scss   | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/client/modules/IDE/components/AssetSize.jsx b/client/modules/IDE/components/AssetSize.jsx
index 58ee9a61..db083708 100644
--- a/client/modules/IDE/components/AssetSize.jsx
+++ b/client/modules/IDE/components/AssetSize.jsx
@@ -23,14 +23,14 @@ const AssetSize = ({ totalSize }) => {
 
   const currentSize = prettyBytes(totalSize);
   const sizeLimit = prettyBytes(MAX_SIZE_B);
-  const percent = formatPercent(totalSize / MAX_SIZE_B);
+  const percentValue = totalSize / MAX_SIZE_B;
+  const percent = formatPercent(percentValue);
 
   return (
-    <div className="asset-size" style={{ '--percent': percent }}>
-      <div className="asset-size-bar">
-        <p className="asset-current">{currentSize} ({percent})</p>
-        <p className="asset-max">Max: {sizeLimit}</p>
-      </div>
+    <div className="asset-size" style={{ '--percent': percentValue }}>
+      <div className="asset-size-bar" />
+      <p className="asset-current">{currentSize} ({percent})</p>
+      <p className="asset-max">Max: {sizeLimit}</p>
     </div>
   );
 };
diff --git a/client/styles/components/_asset-size.scss b/client/styles/components/_asset-size.scss
index 5e6d4d00..809f56e5 100644
--- a/client/styles/components/_asset-size.scss
+++ b/client/styles/components/_asset-size.scss
@@ -1,6 +1,8 @@
 .asset-size {
-  font-size: #{14 / $base-font-size}rem;
+  position: relative;
+  flex: 1;
   margin-bottom: #{18 / $base-font-size}rem;
+  font-size: #{14 / $base-font-size}rem;
 }
 
 .asset-size-bar {
@@ -10,6 +12,10 @@
   width: 200px;
   height: 20px;
 
+  border-radius: #{3 / $base-font-size}rem;
+  border: 1px solid transparent;
+  overflow: hidden;
+
   @include themify() {
     background-color: getThemifyVariable('progress-bar-background-color');
   }
@@ -22,7 +28,7 @@
   top: 0;
   left: 0;
   bottom: 0;
-  width: var(--percent);
+  width: calc(var(--percent) * 100%);
 
   @include themify() {
     background-color: getThemifyVariable('progress-bar-active-color');
@@ -32,13 +38,14 @@
 .asset-current {
   position: absolute;
   top: 28px;
-  left: var(--percent);
+  left: calc(200px * var(--percent));
   margin-left: -8px;
 }
 
 .asset-max {
   position: absolute;
-  right: 0;
-  transform: translate(100%);
+  top: 0;
+  left: 0;
+  transform: translate(210%); // align max label to right of asset-size-bar
   padding-left: #{8 / $base-font-size}rem;
 }