From 174a1dd9a247a096bf5d92829aaecc158f6a948c Mon Sep 17 00:00:00 2001
From: Gabor PEK <gabor.pek@avatao.com>
Date: Tue, 13 Mar 2018 11:11:46 +0100
Subject: [PATCH] Set web component iframe size properly

---
 src/app/dashboard/dashboard.component.scss | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index a70ba70..7911dd7 100755
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -4,6 +4,9 @@
 // Change this to switch template. Options: 'default', 'vraw', 'hraw'
 $layout-template: 'default';
 
+$grid-columns-count: 5;
+$grid-rows-count: 15;
+
 $default-layout: (
   'header': (1, 2, 1, 2),
   'messages': (1, 2, 2, 10),
@@ -55,6 +58,14 @@ $layout: (
   }
 }
 
+@mixin set-web-component-size() {
+  $web-columns-count: nth(map_get($default-layout, 'web'),2) - nth(map_get($default-layout, 'web'),1);
+  $web-rows-count: nth(map_get($default-layout, 'web'),4) - nth(map_get($default-layout, 'web'),3);
+
+  min-width: #{$web-columns-count / $grid-columns-count * 100}vw;
+  min-height: #{$web-rows-count / $grid-rows-count * 100}vh;
+}
+
 .tfw-grid-main-components {
  // overflow-y: visible;
   display: grid;
@@ -62,8 +73,8 @@ $layout: (
   height: 100vh;
   justify-content: center;
   align-content: center;
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: repeat(15, 1fr);
+  grid-template-columns: repeat($grid-columns-count, 1fr);
+  grid-template-rows: repeat($grid-rows-count, 1fr);
 
   @include position-grid-items(map_get($layout,$layout-template),'.tfw-');
 
@@ -89,12 +100,8 @@ $layout: (
 
     .row-container {
       display: flex;
-      width: 100%;
-      height: 100%;
-      flex-direction: column;
-      min-height: 65vmin;
-      min-width: 65vmin;
       overflow: hidden;
+      @include set-web-component-size();
     }
 
     .iframe-row {
@@ -103,7 +110,6 @@ $layout: (
       margin: 0;
       padding: 0;
     }
-
   }
 
   .tfw-webide {