From 880842c39fe9b6aadcd26fe659579f921f66eb7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=2E=20Mert=20Y=C4=B1ld=C4=B1ran?= <mehmet@up9.com>
Date: Sat, 4 Dec 2021 20:25:22 +0300
Subject: [PATCH] Fix the styling of `Queryable` under `StatusCode` and
 `Summary` components (#519)

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

diff --git a/ui/src/components/EntryListItem/EntryListItem.module.sass b/ui/src/components/EntryListItem/EntryListItem.module.sass
index 296404727..e323137f0 100644
--- a/ui/src/components/EntryListItem/EntryListItem.module.sass
+++ b/ui/src/components/EntryListItem/EntryListItem.module.sass
@@ -68,9 +68,8 @@
   flex-direction: column
   overflow: hidden
   padding-right: 10px
+  padding-left: 10px
   flex-grow: 1
-  padding-top: 5px
-  margin-left: -6px
 
 .separatorRight
   display: flex
diff --git a/ui/src/components/UI/StatusCode.tsx b/ui/src/components/UI/StatusCode.tsx
index d9180680a..84dfba351 100644
--- a/ui/src/components/UI/StatusCode.tsx
+++ b/ui/src/components/UI/StatusCode.tsx
@@ -20,8 +20,9 @@ const StatusCode: React.FC<EntryProps> = ({statusCode, updateQuery}) => {
     return <Queryable
         query={`response.status == ${statusCode}`}
         updateQuery={updateQuery}
-        style={{minWidth: "68px"}}
         displayIconOnMouseOver={true}
+        flipped={true}
+        iconStyle={{marginTop: "40px"}}
     >
         <span
             title="Status Code"
diff --git a/ui/src/components/UI/Summary.tsx b/ui/src/components/UI/Summary.tsx
index 7303e11e5..760f0f5f3 100644
--- a/ui/src/components/UI/Summary.tsx
+++ b/ui/src/components/UI/Summary.tsx
@@ -17,6 +17,7 @@ export const Summary: React.FC<SummaryProps> = ({method, summary, updateQuery})
             className={`${miscStyles.protocol} ${miscStyles.method}`}
             updateQuery={updateQuery}
             displayIconOnMouseOver={true}
+            style={{whiteSpace: "nowrap"}}
         >
             <span>
                 {method}