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 (
-
-
-
{currentSize} ({percent})
-
Max: {sizeLimit}
-
+
+
+
{currentSize} ({percent})
+
Max: {sizeLimit}
);
};
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;
}