1 files changed, 22 insertions, 12 deletions

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
index 68146f48..8625403f 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
@@ -4,8 +4,8 @@
         border-style: solid;
         border-color: $light-gray;
     }
-    padding: 0 100px 20px 100px;
-    flex: 1;
+    padding: 44px;
+    max-width: 1567px;
 
     &__title {
         height: 110px;
@@ -16,7 +16,6 @@
 
     &__header {
         display: flex;
-        @include body-1-semibold;
         &__right {
             flex: 1;
             display: flex;
@@ -27,6 +26,7 @@
 
     &__tab {
         padding: 12px;
+        @include body-1-semibold;
         @include border(1px, 1px, 0, 1px);
         background-color: $light-silver;
         color: $gray;
@@ -45,9 +45,18 @@
     }
 
     &__table {
+        min-height: 102px;
+        max-height: calc(100vh - 202px);
+        overflow-y: auto;
         &__thead {
             background-color: $silver;
             @include body-1-semibold;
+            position: -webkit-sticky;
+            position: sticky;
+            top: 0px;
+            z-index: 1;
+        }
+        &__tbody {
         }
     }
 
@@ -74,20 +83,22 @@
         flex: 1;
         display: flex;
         align-items: center;
-        padding: 25px 30px;
+        padding: 20px 17px;
         &--empty {
             padding: 20px;
             color: $dark-gray;
-            @include body-1-semibold;
+            @include body-1;
+            text-transform: uppercase;
             justify-content: center;
         }
 
         .input-output-select {
             width: 100%;
             height: 32px;
-            border: solid 1px #d2d2d2;
+            @include border();
             border-radius: 2px;
-            color: #5a5a5a;
+            padding-left: 5px;
+            color: $text-black;
         }
 
         .sdc-input {
@@ -110,14 +121,13 @@
 
     &__add {
         cursor: pointer;
+        @include body-1;
+        text-transform: uppercase;
         @include border(0, 0, 0, 1px);
         padding-left: 10px;
         margin-left: 10px;
     }
 
-    &__search {
-    }
-
     &__td,
     &__th {
         .sdc-checkbox {
@@ -127,10 +137,10 @@
             flex: unset;
             justify-content: center;
             text-align: center;
-            width: 140px;
+            width: 127px;
         }
         &--icon {
-            width: 100px;
+            width: 98px;
             .svg-icon-wrapper {
                 cursor: pointer;
                 &:hover {