Fix the CSS issue in Queryable inside EntryViewLine (#521)

shared/kubernetes/provider.go

@@ -651,7 +651,17 @@ func (provider *Provider) ApplyMizuTapperDaemonSet(ctx context.Context, namespac
 	agentContainer.WithName(tapperPodName)
 	agentContainer.WithImage(podImage)
 	agentContainer.WithImagePullPolicy(imagePullPolicy)
-	agentContainer.WithSecurityContext(applyconfcore.SecurityContext().WithPrivileged(true))
+
+	caps := applyconfcore.Capabilities().WithDrop("ALL").WithAdd("NET_RAW").WithAdd("NET_ADMIN")
+	
+	if istio {
+		caps = caps.WithAdd("SYS_ADMIN") // for reading /proc/PID/net/ns
+		caps = caps.WithAdd("SYS_PTRACE") // for setting netns to other process
+		caps = caps.WithAdd("DAC_OVERRIDE") // for reading /proc/PID/environ
+	}
+	
+	agentContainer.WithSecurityContext(applyconfcore.SecurityContext().WithCapabilities(caps))
+
 	agentContainer.WithCommand(mizuCmd...)
 	agentContainer.WithEnv(
 		applyconfcore.EnvVar().WithName(shared.LogLevelEnvVar).WithValue(logLevel.String()),

ui/src/components/EntryDetailed/EntrySections.tsx

@@ -31,7 +31,7 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery,
                         <Queryable
                             query={query}
                             updateQuery={updateQuery}
-                            style={{float: "right", height: "0px"}}
+                            style={{float: "right", height: "18px"}}
                             iconStyle={{marginRight: "20px"}}
                             flipped={true}
                             displayIconOnMouseOver={true}

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

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"

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}