Desktop changes

app/assets/stylesheets/app/_editor.scss

@@ -126,12 +126,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 $bg-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-outer-border-color);
     }
   }
-}
+}

app/assets/stylesheets/app/_main.scss

@@ -38,6 +38,7 @@ body {
 
 * {
   box-sizing: border-box;
+  scrollbar-color: rebeccapurple green;
 }
 
 .tinted {

app/assets/stylesheets/app/_modals.scss

@@ -145,7 +145,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";