[camel-karavan] 01/03: Routes scroll

[marat]

This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git

commit 5fdf88acab72d1ea1e9d1e630c6dbfb13ae68717
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Thu Sep 21 14:42:51 2023 -0400

    Routes scroll
---
 karavan-designer/src/designer/karavan.css          | 36 +++++++++-------------
 .../src/designer/route/DslConnections.tsx          |  6 ++--
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/karavan-designer/src/designer/karavan.css 
b/karavan-designer/src/designer/karavan.css
index f1fd43b4..88b5dd81 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -23,6 +23,7 @@
     padding-bottom: 0px;
     padding-right: 0;
     border-bottom: 1px solid #eee;
+    background-color: white;
 }
 
 .karavan .tools-section .dsl-title {
@@ -34,6 +35,16 @@
     margin-right: 16px;
 }
 
+.karavan .tools-section .tools .header {
+    display: flex;
+    flex-direction: row;
+}
+
+.karavan .tools-section .tools .header .labels {
+    height: fit-content;
+    margin-left: 3px;
+}
+
 .karavan .brand {
     height: 36px;
 }
@@ -234,7 +245,7 @@
 }
 
 .karavan .page {
-    height: 100%;
+    height: 100vh;
     width: 100%;
     overflow: hidden;
     display: flex;
@@ -254,6 +265,7 @@
     display: block;
     height: 100%;
     background: #fafafa;
+    padding-bottom: 80px;
 }
 
 .karavan .top-icon {
@@ -331,7 +343,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    margin-bottom: 70px;
+    margin-bottom: 20px;
 }
 
 .karavan .pf-v5-c-drawer__splitter {
@@ -591,7 +603,7 @@
 .karavan .dsl-page .flows {
     width: 100%;
     position: absolute;
-    /*margin-bottom: 80px;*/
+    padding-bottom: 66px;
 }
 
 .karavan .dsl-page .flows .add-flow {
@@ -1265,24 +1277,6 @@
     margin-right: auto;
 }
 
-
-.karavan .tools-section {
-    background-color: white;
-}
-.karavan .tools-section .tools .header {
-    display: flex;
-    flex-direction: row;
-}
-
-.karavan .tools-section .tools .header .labels {
-    height: fit-content;
-    margin-left: 3px;
-}
-
-.karavan .tools-section .knowledge-tabs {
-    background-color: white;
-}
-
 /* Project Tools */
 .karavan .project-builder {
     height: 100%;
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx 
b/karavan-designer/src/designer/route/DslConnections.tsx
index 44f23042..f39a1aa8 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -433,8 +433,8 @@ export function DslConnections() {
         const stepsArray = Array.from(steps.values());
         return (
             <svg
-                style={{width: width, height: height + 80, position: 
"absolute", left: 0, top: 0}}
-                viewBox={"0 0 " + (width) + " " + (height + 80)}>
+                style={{width: width, height: height, position: "absolute", 
left: 0, top: 0}}
+                viewBox={"0 0 " + (width) + " " + (height)}>
                 <defs>
                     <marker id="arrowhead" markerWidth="9" markerHeight="6" 
refX="0" refY="3" orient="auto" className="arrow">
                         <polygon points="0 0, 9 3, 0 6"/>
@@ -450,7 +450,7 @@ export function DslConnections() {
     }
 
     return (
-        <div id="connections" className="connections" style={{ width: width, 
height: height + 80}}>
+        <div id="connections" className="connections" style={{ width: width, 
height: height}}>
             {getSvg()}
             {getIncomings().map(p => getIncomingIcons(p))}
             {getOutgoings().map(p => getOutgoingIcons(p))}