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; }