Fix class selector popup, basic modal setup

Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>

src/TestPanel.js

@@ -101,12 +101,15 @@ function ClassSelector(p){
   const CLASSES = p.GetData("class")
     const wrapperRef = useRef(null);
     useOutsideAlerter(wrapperRef,p.setEdit);
-	return <div className="popup" ref={wrapperRef}>
+	return <><div className="popup2" ref={wrapperRef}>
-		Class Selector<br/>
+    Class Selector<hr/>
-		{Object.keys(CLASSES).map((cl,i)=>{
+      <div className="popup">
-		return <button id={i} className="rounded" onClick={()=>{p.setClassName(cl);p.setEdit(false)}}><img src={process.env.PUBLIC_URL+CLASSES[cl].icon}/><br/>{CLASSES[cl].name}</button>
+        {Object.keys(CLASSES).map((cl,i)=>{
-		})}
+        return <button id={i} className="rounded" onClick={()=>{p.setClassName(cl);p.setEdit(false)}}><img src={process.env.PUBLIC_URL+CLASSES[cl].icon}/><br/>{CLASSES[cl].name}</button>
-	</div>
+        })}
+      </div>
+    </div>
+  </>
 }
 
 function EditableClass(p){
@@ -119,7 +122,7 @@ function EditableClass(p){
 
 function PopupWindow(p) {
 	return <Modal isOpen={p.modalOpen} onRequestClose={()=>{p.setModalOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
-<div className="box">
+<div className="box boxModal">
 <div className="boxTitleBar">
 <h1>{p.title}</h1>
 {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}

src/style.css

@@ -549,17 +549,17 @@ li.r4 {
 	clear: both;
 }
 .itemlistcontainer {
-	max-height: 400px;
+/*	max-height: 400px;*/
 	overflow-y: scroll;
 	overflow-x: hidden;
 	margin: 10px 5px 0 0;
 	padding: 2px;
-}
+}/*
 @media screen and (min-width:390px) and (max-width:860px) {
 .itemlistcontainer {
 	max-height: 300px;
 }
-}
+}*/
 .itemlist li:hover, .treeList li:hover {
 	background-color: rgba(113,169,189,0.33);
 	outline: 2px solid rgba(54,255,255,0.66);
@@ -890,12 +890,16 @@ input#editBoxInput {
 	outline: 2px solid #30cdef;
 }
 .popup{
+	display: flex;
+	flex-wrap: wrap;
+}
+.popup2{
+	z-index:5;
 	position: absolute;
 	background-color: rgba(128,128,128,0.9);
 	max-width: 250px;
 	min-width: 100px;
 	padding: 20px;
-	
 }
 .popup button{
 	margin:5px;
@@ -942,16 +946,10 @@ button{
 	padding: 4px;
 }
 .modal {
-    position: absolute;
+	flex-grow: 1;
-    top: 0;
+	flex-basis: 200px;
-    left: 0;
+	max-width: 580px;
-    right: 0;
-    bottom: 0;
-    background-color: papayawhip;
 	outline: 0;
-	display: flex;
-	flex-flow: row wrap;
-	justify-content: center;
   }
 .modalOverlay {
     position: fixed;
@@ -959,7 +957,14 @@ button{
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0,0,0,.33);
+    background: rgba(0,0,0,.80);
+
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: center;
+}
+.boxModal {
+
 }
 .webicon{
 	color:maroon;