Merge branch 'develop' into add-replace

Author: SundeepChand

client/modules/IDE/components/AssetSize.jsx

@@ -30,9 +30,11 @@ const AssetSize = ({ totalSize }) => {
   const percentSize = percentValue < 1 ? percentValue : 1;
 
   return (
-    <div className="asset-size" style={{ '--percent': percentSize }}>
-      <div className="asset-size-bar" />
-      <p className="asset-current">{currentSize} ({percent})</p>
+    <div className="asset-size">
+      <div className="asset-size-bar" style={{ '--percent': percentSize }} />
+      <p className="asset-current">
+        {currentSize} ({percent})
+      </p>
       <p className="asset-max">Max: {sizeLimit}</p>
     </div>
   );

client/styles/components/_preferences.scss

@@ -2,14 +2,23 @@
   width: 100%;
   width: #{640 / $base-font-size}rem;
   max-width: 100%;
-  min-height: #{460 / $base-font-size}rem;
   max-height: 100%;
   z-index: 9999;
   padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 /
     $base-font-size}rem;
   display: flex;
   flex-direction: column;
   outline: none;
+  height: calc(80vh - #{65 / $base-font-size}rem);
+  max-height: #{460 / $base-font-size}rem;
+  & .react-tabs {
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  & .react-tabs__tab-panel {
+    overflow-y: scroll;
+  }
 }
 
 .preferences__exit-button {