From 00e4c2f7b33dd421d2e4b0b392606cf362e4821d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com>
Date: Tue, 27 Aug 2019 17:02:32 +0200
Subject: [PATCH] Fix iframe scrolling and other CSS issues

---
 src/app/dashboard/dashboard.component.scss |  1 +
 src/assets/scss/mixins/_layout.scss        | 34 +++++++++++-----------
 src/assets/scss/mixins/_scrollbar.scss     |  1 +
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 1d25e72..8552c99 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -66,6 +66,7 @@
 
   .tfw-header {
     padding: $small;
+    padding-top: $tiny;
     background-color: $tao-gray-50;
   }
 
diff --git a/src/assets/scss/mixins/_layout.scss b/src/assets/scss/mixins/_layout.scss
index cddfa5d..dc6d682 100644
--- a/src/assets/scss/mixins/_layout.scss
+++ b/src/assets/scss/mixins/_layout.scss
@@ -2,8 +2,8 @@ $grid-columns-count: 100;
 $grid-rows-count: 30;
 
 $terminal-ide-web-layout: (
-  'header': (0, 20, 0, 4),
-  'messages': (0, 20, 4, 60),
+  'header': (0, 20, 0, 8),
+  'messages': (0, 20, 8, 60),
   'ide': (56, 96, 0, 100),
   'terminal': (0, 56, 60, 100),
   'web': (20, 56, 0, 60),
@@ -11,8 +11,8 @@ $terminal-ide-web-layout: (
 );
 
 $terminal-web-layout: (
-  'header': (0, 20, 0, 4),
-  'messages': (0, 20, 2, 100),
+  'header': (0, 20, 0, 8),
+  'messages': (0, 20, 8, 100),
   'ide': (),
   'terminal': (56, 96, 0, 100),
   'web': (20, 56, 0, 100),
@@ -20,8 +20,8 @@ $terminal-web-layout: (
 );
 
 $terminal-ide-vertical-layout: (
-  'header': (0, 20, 0, 4),
-  'messages': (0, 20, 2, 100),
+  'header': (0, 20, 0, 8),
+  'messages': (0, 20, 8, 100),
   'ide': (56, 96, 0, 100),
   'terminal': (20, 56, 0, 100),
   'web': (),
@@ -29,8 +29,8 @@ $terminal-ide-vertical-layout: (
 );
 
 $terminal-ide-horizontal-layout: (
-  'header': (0, 20, 0, 4),
-  'messages': (0, 20, 2, 100),
+  'header': (0, 20, 0, 8),
+  'messages': (0, 20, 8, 100),
   'ide': (20, 96, 0, 60),
   'terminal': (20, 96, 60, 100),
   'web': (),
@@ -38,8 +38,8 @@ $terminal-ide-horizontal-layout: (
 );
 
 $ide-web-vertical-layout: (
-  'header': (0, 20, 0, 4),
-  'messages': (0, 20, 4, 100),
+  'header': (0, 20, 0, 8),
+  'messages': (0, 20, 8, 100),
   'ide': (56, 96, 0, 100),
   'terminal': (),
   'web': (20, 56, 0, 100),
@@ -47,8 +47,8 @@ $ide-web-vertical-layout: (
 );
 
 $terminal-only-layout: (
-  'header': (0, 20, 0, 4),
-  'messages': (0, 20, 4, 100),
+  'header': (0, 20, 0, 8),
+  'messages': (0, 20, 8, 100),
   'ide': (),
   'terminal': (20, 96, 0, 100),
   'web': (),
@@ -56,8 +56,8 @@ $terminal-only-layout: (
 );
 
 $ide-only-layout: (
-  'header': (0, 20, 0, 4),
-  'messages': (0, 20, 4, 100),
+  'header': (0, 20, 0, 8),
+  'messages': (0, 20, 8, 100),
   'ide': (20, 96, 0, 100),
   'terminal': (),
   'web': (),
@@ -65,8 +65,8 @@ $ide-only-layout: (
 );
 
 $web-only-layout: (
-  'header': (0, 20, 0, 4),
-  'messages': (0, 20, 4, 100),
+  'header': (0, 20, 0, 8),
+  'messages': (0, 20, 8, 100),
   'ide': (),
   'terminal': (),
   'web': (20, 96, 0, 100),
@@ -142,7 +142,7 @@ $layouts: (
 
   @if (length($tfw-component) > 0) {
     $columns-count: convert-ratio(nth($tfw-component,2), $grid-columns-count) - convert-ratio(nth($tfw-component,1), $grid-columns-count);
-    $rows-count: convert-ratio(nth($tfw-component,4), $grid-columns-count) - convert-ratio(nth($tfw-component,3), $grid-columns-count);
+    $rows-count: convert-ratio(nth($tfw-component,4), $grid-rows-count) - convert-ratio(nth($tfw-component,3), $grid-rows-count);
 
     min-width: #{$columns-count / $grid-columns-count * 100}vw;
     min-height: #{$rows-count / $grid-rows-count * 100}vh;
diff --git a/src/assets/scss/mixins/_scrollbar.scss b/src/assets/scss/mixins/_scrollbar.scss
index 9a4c3fd..41bae4d 100644
--- a/src/assets/scss/mixins/_scrollbar.scss
+++ b/src/assets/scss/mixins/_scrollbar.scss
@@ -1,6 +1,7 @@
 @mixin set-scrollbar-style($style, $selctor) {
   ::-webkit-scrollbar {
     width: 3px !important;
+    height: 3px !important;
   }
 
   #{$selctor}::-webkit-scrollbar-track {