Merged changes

app/assets/javascripts/app/services/componentManager.js

@@ -981,10 +981,7 @@ class ComponentManager {
       if(!iframe) {
         return;
       }
-      var width = data.width;
-      var height = data.height;
-      iframe.width = width;
-      iframe.height = height;
+
       setSize(iframe, data);
 
       // On Firefox, resizing a component iframe does not seem to have an effect with editor-stack extensions.

app/assets/stylesheets/app/_editor.scss

@@ -124,13 +124,18 @@ $heading-height: 75px;
 #editor-pane-component-stack {
   width: 100%;
 
+  // When two component stack items are expired and eat up full screen, this is required to scroll them.
+  overflow: auto;
+
   .component-stack-item {
     width: 100%;
     position: relative;
-    border-top: 1px solid var(--sn-stylekit-border-color);
 
     iframe {
       width: 100%;
+      // we moved the border top from the .component-stack-item to the .iframe, as on parent,
+      // it increases its height and caused unneccessary scrollbars on windows.
+      border-top: 1px solid var(--sn-component-border-color);
     }
   }
 }

app/assets/stylesheets/app/_modals.scss

@@ -143,7 +143,13 @@
   }
 
   iframe {
-    flex: 1;
+    // We're disabling flex: 1; because on Firefox, it causes weird sizing issues with component stack items.
+    // Not sure yet if totally required.
+    // Update: The extensions manager doesn't display correctly without it
+    // flex-grow: 1 should fix that.
+  
+    flex-grow: 1;
     width: 100%;
+    height: 100%;
   }
 }

app/assets/stylesheets/main.css.scss

@@ -9,4 +9,4 @@
 @import "app/modals";
 @import "app/lock-screen";
 @import "app/stylekit-sub";
-@import "app/ionicons";
+@import "app/ionicons";