[camel-karavan] 05/07: Fix REST UI for complex API

[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 7e98d9c6b24d5f962103e501f484b36874ae2e1c
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Mon Sep 19 15:50:15 2022 -0400

    Fix REST UI for complex API
---
 karavan-designer/src/designer/karavan.css             | 12 ++++++++++--
 karavan-designer/src/designer/rest/RestMethodCard.tsx |  6 ++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/karavan-designer/src/designer/karavan.css 
b/karavan-designer/src/designer/karavan.css
index 071aa52..b4efbaa 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -930,7 +930,7 @@
 
 .karavan .rest-page .flows {
     width: 800px;
-    margin: 0 auto;
+    margin: 0 auto 80px auto;
 }
 
 .karavan .rest-page .flows .add-flow {
@@ -950,6 +950,11 @@
     position: relative;
 }
 
+.karavan .rest-page .method-card .rest-method-desc {
+    display: flex;
+    flex-direction: column;
+}
+
 .karavan .rest-page .rest-card-unselected,
 .karavan .rest-page .rest-config-card-unselected,
 .karavan .rest-page .method-card-unselected {
@@ -1026,7 +1031,10 @@
 .karavan .rest-page .rest-config-card .description,
 .karavan .rest-page .method-card .description {
     margin: auto 0 auto 0;
-    width: 100%;
+    width: 670px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .karavan .rest-page .rest-config-card .delete-button,
diff --git a/karavan-designer/src/designer/rest/RestMethodCard.tsx 
b/karavan-designer/src/designer/rest/RestMethodCard.tsx
index eee356b..b1a5cdc 100644
--- a/karavan-designer/src/designer/rest/RestMethodCard.tsx
+++ b/karavan-designer/src/designer/rest/RestMethodCard.tsx
@@ -55,8 +55,10 @@ export class RestMethodCard extends 
React.Component<Props<any>, State<any>> {
         return (
             <div className={this.props.selectedStep?.uuid === method.uuid ? 
"method-card method-card-selected" : "method-card method-card-unselected"} 
onClick={e => this.selectElement(e)}>
                 <div className="method">{method.dslName.replace('Definition', 
'').toUpperCase()}</div>
-                <div className="title">{method.path}</div>
-                <div className="description">{method.description}</div>
+                <div className="rest-method-desc">
+                    <div className="title">{method.path}</div>
+                    <div className="description">{method.description}</div>
+                </div>
                 <Button variant="link" className="delete-button" onClick={e => 
this.delete(e)}><DeleteIcon/></Button>
             </div>
         );