From 2f7ec48003a3ad671dc6972df7323bb9c987a270 Mon Sep 17 00:00:00 2001
From: D038721 <esther.schmitz@sap.com>
Date: Tue, 14 Jun 2022 18:28:57 +0200
Subject: [PATCH] [keymanager][devenv] several style fixes, previous
 positioning broke the app layout, also some cosmetic fixes

---
 apps/keymanager/src/DevEnv.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/apps/keymanager/src/DevEnv.js b/apps/keymanager/src/DevEnv.js
index 526c8e824..b5c6db0a3 100644
--- a/apps/keymanager/src/DevEnv.js
+++ b/apps/keymanager/src/DevEnv.js
@@ -54,8 +54,9 @@ const DevEnv = () => {
     for (let key in dataset) {
       element.setAttribute(key, dataset[key])
     }
-
-    document.body.appendChild(element)
+    let wrapper = document.createElement("div")
+    wrapper.appendChild(element)
+    document.body.appendChild(wrapper)
 
     return () => {
       console.log(`Dynamic Script Removed: ${url}`)
@@ -64,16 +65,15 @@ const DevEnv = () => {
   }, [])
 
   return (
-    <>
+    <div className="flex flex-col" style={showDetails ? {height: "100vh"} : {}}>
       {token ? (
-        <div style={{ textAlign: "right" }}>
-          Wellcome {token.user.name}{" "}
+        <div className="flex gap-2 items-center p-2 ml-auto">
+          Welcome {token.user.name}{" "}
           <Button variant="subdued" onClick={logout} size="small">
             Logout
           </Button>{" "}
           <Button
             size="small"
-            variant="primary"
             onClick={() =>
               showDetails ? setShowDetails(false) : setShowDetails(true)
             }
@@ -87,21 +87,18 @@ const DevEnv = () => {
         </Button>
       )}
       {showDetails && (
-        <>
-          <br />
-          <pre tw="block m-0 p-0 overflow-auto text-white text-sm bg-gray-800">
-            {JSON.stringify(token, null, 2)}
-          </pre>
-        </>
+        <pre className="overflow-y-auto grow">
+          {JSON.stringify(token, null, 2)}
+        </pre>
       )}
-    </>
+    </div>
   )
 }
 
 const dev = document.createElement("div")
 dev.setAttribute(
   "style",
-  "position: absolute; right: 0px; top: 0px; z-index: 1000; padding: 15px;"
+  "position: absolute; right: 0px; top: 0px; z-index: 1000;"
 )
 document.body.prepend(dev)