From d274db2d87492ca6c0de4a12e8ca05b3acf1c08f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=2E=20Mert=20Y=C4=B1ld=C4=B1ran?= <mehmet@up9.com>
Date: Sun, 12 Dec 2021 19:38:14 +0300
Subject: [PATCH] Fix the CSS issues in queryable vertical protocol element
 (#526)

---
 ui/src/components/EntryListItem/EntryListItem.module.sass | 1 -
 ui/src/components/EntryListItem/EntryListItem.tsx         | 8 ++++++--
 ui/src/components/UI/Protocol.tsx                         | 3 ++-
 ui/src/components/UI/StatusCode.tsx                       | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/EntryListItem/EntryListItem.module.sass b/ui/src/components/EntryListItem/EntryListItem.module.sass
index 11886f7de..5a86a38ba 100644
--- a/ui/src/components/EntryListItem/EntryListItem.module.sass
+++ b/ui/src/components/EntryListItem/EntryListItem.module.sass
@@ -68,7 +68,6 @@
   flex-direction: column
   overflow: hidden
   padding-right: 10px
-  padding-left: 10px
   flex-grow: 1
 
 .separatorRight
diff --git a/ui/src/components/EntryListItem/EntryListItem.tsx b/ui/src/components/EntryListItem/EntryListItem.tsx
index 1241b25b2..0a3c12285 100644
--- a/ui/src/components/EntryListItem/EntryListItem.tsx
+++ b/ui/src/components/EntryListItem/EntryListItem.tsx
@@ -120,6 +120,10 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
             break;
     }
 
+    const isStatusCodeEnabled = ((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0);
+    var endpointServiceContainer = "10px";
+    if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
+
     return <>
         <div
             id={`entry-${entry.id.toString()}`}
@@ -142,10 +146,10 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
                 horizontal={false}
                 updateQuery={updateQuery}
             /> : null}
-            {((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0) && <div>
+            {isStatusCodeEnabled && <div>
                 <StatusCode statusCode={entry.statusCode} updateQuery={updateQuery}/>
             </div>}
-            <div className={styles.endpointServiceContainer}>
+            <div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
                 <Summary method={entry.method} summary={entry.summary} updateQuery={updateQuery}/>
                 <div className={styles.service}>
                     <Queryable
diff --git a/ui/src/components/UI/Protocol.tsx b/ui/src/components/UI/Protocol.tsx
index 5369847fb..3db0c2eb1 100644
--- a/ui/src/components/UI/Protocol.tsx
+++ b/ui/src/components/UI/Protocol.tsx
@@ -48,7 +48,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
             updateQuery={updateQuery}
             displayIconOnMouseOver={true}
             flipped={false}
-            iconStyle={{marginTop: "48px"}}
+            iconStyle={{marginTop: "52px", marginRight: "10px", zIndex: 1000}}
         >
             <span
                 className={`${styles.base} ${styles.vertical}`}
@@ -56,6 +56,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
                     backgroundColor: protocol.backgroundColor,
                     color: protocol.foregroundColor,
                     fontSize: protocol.fontSize,
+                    marginRight: "-20px",
                 }}
                 title={protocol.longName}
             >
diff --git a/ui/src/components/UI/StatusCode.tsx b/ui/src/components/UI/StatusCode.tsx
index 84dfba351..054be378a 100644
--- a/ui/src/components/UI/StatusCode.tsx
+++ b/ui/src/components/UI/StatusCode.tsx
@@ -22,7 +22,7 @@ const StatusCode: React.FC<EntryProps> = ({statusCode, updateQuery}) => {
         updateQuery={updateQuery}
         displayIconOnMouseOver={true}
         flipped={true}
-        iconStyle={{marginTop: "40px"}}
+        iconStyle={{marginTop: "40px", paddingLeft: "10px"}}
     >
         <span
             title="Status Code"