media panel hiding bug fixed. scroll area fixed

Author: LianaHus

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css

@@ -36,7 +36,7 @@
 .remixui_home_rightPanel {
   right: 0;
   position: absolute;
-  z-index: 3;
+  z-index: 3000;
 }
 .remixui_home_remixHomeMedia {
   overflow-y: auto;

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -80,6 +80,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
 
   const remiAudioEl = useRef(null)
   const inputValue = useRef(null)
+  const rightPanel = useRef(null)
 
   useEffect(() => {
     plugin.call('theme', 'currentTheme').then((theme) => {
@@ -97,7 +98,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     window.addEventListener('click', (event) => {
       const target = event.target as Element
       const id = target.id
-      if (id !== 'remixIDEHomeTwitterbtn' && id !== 'remixIDEHomeMediumbtn') {
+      if (id !== 'remixIDEHomeTwitterbtn' && id !== 'remixIDEHomeMediumbtn' && !rightPanel.current.contains(event.target)) {
         // todo check event.target
         setState(prevState => { return { ...prevState, showMediaPanel: 'none' } })
       }
@@ -125,7 +126,6 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   }
 
   const createNewFile = async () => {
-    plugin.verticalIcons.select('filePanel')
     await plugin.call('filePanel', 'createNewFile')
   }
 
@@ -262,22 +262,21 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 <h4>File</h4>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file"></i>
-                  <label className="ml-1 mb-1 remixui_home_text" onClick={() => createNewFile()}>New File</label>
+                  <span className="ml-1 mb-1 remixui_home_text" onClick={() => createNewFile()}>New File</span>
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file-alt"></i>
-                  <label className="ml-1 remixui_home_labelIt remixui_home_bigLabelSize} remixui_home_text" htmlFor="openFileInput">
+                  <span className="ml-1 remixui_home_labelIt remixui_home_bigLabelSize remixui_home_text">
                     Open Files
-                  </label>
-                  <input title="open file" type="file" id="openFileInput" onChange={(event) => {
-                    event.stopPropagation()
-                    plugin.verticalIcons.select('filePanel')
-                    uploadFile(event.target)
-                  }} multiple />
+                    <input title="open file" type="file" onChange={(event) => {
+                      event.stopPropagation()
+                      uploadFile(event.target)
+                    }} multiple />
+                  </span>
                 </p>
                 <p className="mb-1">
                   <i className="mr-1 far fa-hdd"></i>
-                  <label className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}>Connect to Localhost</label>
+                  <span className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span>
                 </p>
                 <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
                 <div className="btn-group">
@@ -303,7 +302,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 fab fa-ethereum remixui_home_image"></i>
-                  <label className="remixui_home_text" onClick={() => switchToPreviousVersion()}>Old experience</label>
+                  <span className="remixui_home_text" onClick={() => switchToPreviousVersion()}>Old experience</span>
                 </p>
               </div>
             </div>
@@ -334,9 +333,14 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
               }}
             ></button>
           </div>
-          <div className="mr-3 d-flex bg-light remixui_home_panels" style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } } id="remixIDEMediaPanels">
+          <div
+            className="mr-3 d-flex bg-light remixui_home_panels"
+            style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } }
+            id="remixIDEMediaPanels"
+            ref={rightPanel}
+          >
             <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
-              <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: elHeight } }>
+              <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: '10000px' } }>
                 <div
                   id="retainable-rss-embed"
                   data-rss="https://medium.com/feed/remix-ide"
@@ -353,7 +357,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
               <div className="remixui_home_media" style={ { minHeight: elHeight } } >
                 <a className="twitter-timeline"
-                  data-width="330"
+                  data-width="375"
                   data-theme={ state.themeQuality.name }
                   data-chrome="nofooter noheader transparent"
                   data-tweet-limit="18"