From 54ea2afe7156ee19393fb856f2aac18c18ff9b87 Mon Sep 17 00:00:00 2001
From: leon-up9 <97597983+leon-up9@users.noreply.github.com>
Date: Thu, 20 Jan 2022 18:21:50 +0200
Subject: [PATCH] TRA-4176 plus icon is not visible (#664)

* flipped button

* remove comment

* edit style

* overflow for .resolvedName removed

Co-authored-by: Leon <>
Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>
---
 .../components/EntryListItem/EntryListItem.module.sass |  1 -
 ui/src/components/EntryListItem/EntryListItem.tsx      | 10 +++++-----
 ui/src/components/UI/Summary.tsx                       |  4 ++++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/EntryListItem/EntryListItem.module.sass b/ui/src/components/EntryListItem/EntryListItem.module.sass
index 461066cd1..f74a187e0 100644
--- a/ui/src/components/EntryListItem/EntryListItem.module.sass
+++ b/ui/src/components/EntryListItem/EntryListItem.module.sass
@@ -47,7 +47,6 @@
 
 .resolvedName
   text-overflow: ellipsis
-  overflow: hidden
   white-space: nowrap
   color: $secondary-font-color
   padding-left: 4px
diff --git a/ui/src/components/EntryListItem/EntryListItem.tsx b/ui/src/components/EntryListItem/EntryListItem.tsx
index 55d0ec2be..20f9c1f88 100644
--- a/ui/src/components/EntryListItem/EntryListItem.tsx
+++ b/ui/src/components/EntryListItem/EntryListItem.tsx
@@ -162,7 +162,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
                         displayIconOnMouseOver={true}
                         flipped={true}
                         style={{marginTop: "-4px", overflow: "visible"}}
-                        iconStyle={!headingMode ? {marginTop: "4px", left: "68px", position: "absolute"} :
+                        iconStyle={!headingMode ? {marginTop: "4px", right: "16px", position: "relative"} :
                         entry.proto.name === "http" ? {marginTop: "4px", left: "calc(50vw + 41px)", position: "absolute"} :
                         {marginTop: "4px", left: "calc(50vw - 9px)", position: "absolute"}}
                     >
@@ -172,16 +172,16 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
                             {entry.src.name ? entry.src.name : "[Unresolved]"}
                         </span>
                     </Queryable>
-                    <SwapHorizIcon style={{color: entry.proto.backgroundColor, marginTop: "-2px"}}></SwapHorizIcon>
+                    <SwapHorizIcon style={{color: entry.proto.backgroundColor, marginTop: "-2px",marginLeft:"5px",marginRight:"5px"}}></SwapHorizIcon>
                     <Queryable
                         query={`dst.name == "${entry.dst.name}"`}
                         displayIconOnMouseOver={true}
+                        flipped={true}
                         style={{marginTop: "-4px"}}
-                        iconStyle={{marginTop: "4px", marginLeft: "-2px"}}
+                        iconStyle={{marginTop: "4px", marginLeft: "-2px",right: "11px", position: "relative"}}
                     >
                         <span
-                            title="Destination Name"
-                        >
+                            title="Destination Name">
                             {entry.dst.name ? entry.dst.name : "[Unresolved]"}
                         </span>
                     </Queryable>
diff --git a/ui/src/components/UI/Summary.tsx b/ui/src/components/UI/Summary.tsx
index 76ad2284e..ef01cd400 100644
--- a/ui/src/components/UI/Summary.tsx
+++ b/ui/src/components/UI/Summary.tsx
@@ -16,6 +16,8 @@ export const Summary: React.FC<SummaryProps> = ({method, summary}) => {
             className={`${miscStyles.protocol} ${miscStyles.method}`}
             displayIconOnMouseOver={true}
             style={{whiteSpace: "nowrap"}}
+            flipped={true}
+            iconStyle={{zIndex:"5",position:"relative",right:"22px"}}
         >
             <span>
                 {method}
@@ -24,6 +26,8 @@ export const Summary: React.FC<SummaryProps> = ({method, summary}) => {
         {summary && <Queryable
             query={`summary == "${summary}"`}
             displayIconOnMouseOver={true}
+            flipped={true}
+            iconStyle={{zIndex:"5",position:"relative",right:"14px"}}
         >
             <div
                 className={`${styles.summary}`}