Desktop changes

app/assets/javascripts/app/directives/views/componentView.js

@@ -125,6 +125,8 @@ class ComponentView {
 
       expired = component.valid_until && component.valid_until <= new Date();
 
+      // expired = true;
+
       $scope.componentValid = !offlineRestricted && !urlError && !expired;
 
       if(offlineRestricted) $scope.error = 'offline-restricted';

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

@@ -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";

app/assets/templates/editor.html.haml

@@ -79,6 +79,5 @@
     %p.medium-padding{"style" => "padding-top: 0 !important;"} There was an error decrypting this item. Ensure you are running the latest version of this app, then sign out and sign back in to try again.
 
   #editor-pane-component-stack
-    .sn-component
-      %component-view.component-view.component-stack-item.border-color{"ng-repeat" => "component in ctrl.componentStack",
+    %component-view.sn-component.component-view.component-stack-item.border-color{"ng-repeat" => "component in ctrl.componentStack",
        "ng-if" => "component.active", "ng-show" => "!component.hidden", "manual-dealloc" => "true", "component" => "component"}