Add next button for instructions and finally the terminal is responsive

src/app/dashboard/dashboard.component.scss

@@ -62,19 +62,14 @@
   }
 
   .tfw-terminal {
-    // overflow-y: hidden;
+    overflow-y: hidden;
     border: 1px solid $tao-plum-100;
-    border-left: 0;
     border-bottom: 0;
-    background-color: black;
-  }
-
-  .tfw-terminal-footer {
     background-color: $tao-gray-800;
-    border: 1px solid $tao-plum-100;
-    border-left: 0;
-    border-top: 0;
-    border-bottom: 0;
+
+    @if ($layout-template != 'vraw') {
+      border-left: 0;
+    }
   }
 }
 

src/app/messages/messages.component.html

@@ -1,5 +1,8 @@
 <div class="tfw-messages-main">
-  <h5>Instructions</h5>
+  <div class="tfw-grid-messages-header">
+    <div class="tao-grid-top-left"><span>Instructions</span></div>
+    <div class="tao-grid-center-right"><button class="tao-btn-rainbow">Next</button></div>
+  </div>
   <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
     <div class="tfw-grid-message-header">
       <img class="tao-grid-center-left" src="images/avataobot.svg"/>

src/app/messages/messages.component.scss

@@ -1,17 +1,21 @@
 @import "../../assets/scss/variables.scss";
 
-.tfw-grid-header-messages {
-
-  display: grid;
-  grid-template-rows: $tao-navbar-height auto;
-}
-
 .tfw-messages-main {
-  h5 {
+
+
+  .tfw-grid-messages-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     margin-bottom: $small;
-    color: $tao-blue-500;
-    font-weight: 500;
+
+
+    span {
+      color: $tao-blue-500;
+      font-weight: 500;
+      font-size: $font-size-h3;
+    }
   }
+
 }
 
 .tfw-grid-message {

src/app/terminal/terminal.component.html

@@ -1,3 +1 @@
-<div class="tfw-xterm-container">
-  <div #xterm class="tfw-xterm"></div>
-</div>
+  <div #xterm class="tfw-xterm" (window:resize)="fit()"></div>

src/app/terminal/terminal.component.scss

@@ -1,6 +1,14 @@
 @import "../../assets/scss/mixins/layout.scss";
+@import "../../app/dashboard/dashboard.component.scss";
 
-.tfw-xterm-container {
-  @include set-component-size('terminal');
 
+
+
+.tfw-xterm {
+  max-height: 100%;
+  height: 100%;
+  min-height: 100%;
 }
+
+
+

src/assets/scss/mixins/_layout.scss

@@ -5,8 +5,7 @@ $default-layout: (
   'header': (1, 2, 1, 2),
   'messages': (1, 2, 2, 10),
   'webide': (4,$grid-rows-count+1, 1, $grid-rows-count+1),
-  'terminal': (1, 4, 10, $grid-rows-count),
-  'terminal-footer': (1, 4, $grid-rows-count, -1),
+  'terminal': (1, 4, 10, $grid-rows-count+1),
   'web': (2, 4, 1, 10)
 );
 
@@ -14,8 +13,7 @@ $vraw-layout: (
   'header': (1, 2, 1, 2),
   'messages': (1, 2, 2,$grid-rows-count+1),
   'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
-  'terminal': (2, 4, 1,$grid-rows-count),
-  'terminal-footer': (2, 4, $grid-rows-count, -1),
+  'terminal': (2, 4, 1,$grid-rows-count+1),
   'web': (),
 );
 
@@ -23,8 +21,7 @@ $hraw-layout: (
   'header': (1, 2, 1,$grid-rows-count+1),
   'messages': (1, 2, 2,$grid-rows-count+1),
   'webide': (2,$grid-rows-count+1, 1, 10),
-  'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count),
-  'terminal-footer': (2, $grid-rows-count+1, $grid-rows-count, -1),
+  'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count+1),
   'web': (),
 );
 
@@ -62,10 +59,4 @@ $layout: (
 
   min-width: #{$columns-count / $grid-columns-count * 100}vw;
   min-height: #{$rows-count / $grid-rows-count * 100}vh;
-
-  width: #{$columns-count / $grid-columns-count * 100}vw;
-  height: #{$rows-count / $grid-rows-count * 100}vh;
-
-  max-width: #{$columns-count / $grid-columns-count * 100}vw;
-  max-height: #{$rows-count / $grid-rows-count * 100}vh;
 }

src/assets/scss/shared/_buttons.scss

@@ -24,11 +24,18 @@
     padding: 8px 24px;
   }
 
-  &:hover {
+  &:hover
+  {
+    background: initial;
     background-color: transparent;
     color: $tao-blue-500;
     box-shadow: inset 0 0 0 1px $tao-blue-500;
   }
+
+  &:active {
+
+  }
+
 }
 
 .tao-btn-rainbow {