From 97c0603a4a3d277e2f342e9ba68c925f357d448e Mon Sep 17 00:00:00 2001
From: David Zagi <davidzagi@yahoo.com>
Date: Fri, 17 Dec 2021 11:45:40 +0100
Subject: [PATCH] updated sidePanel addView

---
 apps/remix-ide/src/app/components/panel.js      | 12 +++++++++++-
 apps/remix-ide/src/app/components/side-panel.js |  5 +++--
 .../side-panel/src/lib/remix-ui-side-panel.tsx  | 17 +++++++++--------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index a3264ea7e4..daa211a121 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -22,7 +22,14 @@ export class AbstractPanel extends HostPlugin {
 
   addView (profile, view) {
     if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
+    view.style.height = '100%'
+    view.style.width = '100%'
     view.style.border = '0'
+
+    if (view.tagName === 'IFRAME') {
+      view.style.display = 'block'
+    }
+
     this.contents[profile.name] = view
     this.contents[profile.name].style.display = 'none'
     this.element.appendChild(this.contents[profile.name])
@@ -57,9 +64,12 @@ export class AbstractPanel extends HostPlugin {
     if (this.active) {
       this.contents[this.active].style.display = 'none'
     }
+    console.log({ name, active: this.active, contents: this.contents })
     this.contents[name].style.display = 'flex'
+    this.contents[name].style.paddingTop = '20%'
+    this.contents[name].style.flexDirection = 'column'
+
     this.active = name
-    this.renderComponent()
   }
 
   focus (name) {
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 7d8ccad5bf..f39dd7963d 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -18,8 +18,9 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.sideelement = this.element
-    // this.sideelement.setAttribute('class', 'panel')
+    // this.sideelement = this.element
+    this.sideelement = document.createElement('div')
+    this.element = this.sideelement
     this.verticalIcons = verticalIcons
 
     // Toggle content
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
index 387cd80e5a..129a3068b1 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
@@ -46,14 +46,9 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
    return (
     <header style={{
       display: 'flex',
-    flexDirection: 'column',
     alignItems: 'center',
-    padding: '10px',
-    position: 'sticky',
-    top: 0,
-    zIndex: 2,
-    marginBottom: '0px',
-    boxSizing: 'inherit',
+    padding: '16px 24px 15px',
+    justifyContent: 'space-between',
     }}>
     <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
     {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
@@ -65,7 +60,13 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
 
 
   return (
-            <section style={{ position:'sticky' }}>
+            <section style={{
+              position: "fixed",
+              height: "50px",
+              width: "320px",
+              backgroundColor: "var(--light)",
+              zIndex: "999",
+            }} >
               {renderHeader()}
             </section>
   );