layout stuff and time for Bof5

src/TestPanel.js

@@ -246,8 +246,8 @@ useEffect(()=>{
             <span className="ye"><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></span>
             </td>
           </tr>
-          <tr onClick={()=>{setClassSkillTreeWindowOpen(true)}} >
+          <tr>
-            <td>Sub-Class</td>
+            <td onClick={()=>{setClassSkillTreeWindowOpen(true)}}>Sub-Class</td>
             <td>
             <EditableClass GetData={p.GetData} setClassName={setsubclassName} class={subclassName}></EditableClass>
             </td>
@@ -505,13 +505,13 @@ AUGMENT
 
 <SelectorWindow title="Class Select" modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}>ez pz</SelectorWindow>
 
-<Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlaySkillTree">
+<Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modalSkillTree" overlayClassName="modalOverlaySkillTree">
 
 
 <div className="box treeSelectBox">
 <div className="boxTitleBar">
 <h1>Class Skill Tree</h1>
-<div className="boxExit"></div>
+<div className="boxExit" onClick={()=>{setClassSkillTreeWindowOpen(false)}}></div>
 </div>
 <div className="treeListContainer customScrollbar">
 <ul className="treeList">
@@ -528,7 +528,7 @@ AUGMENT
 <div className="box skillTreeBox">
 <div className="boxTitleBar">
 <h1>Ranger01</h1>
-<div className="boxExit"></div>
+<div className="boxExit" onClick={()=>{setClassSkillTreeWindowOpen(false)}}></div>
 </div>
 <div className="skillTreeContainer customScrollbar">
 <div className="skillTreeGrid">
@@ -544,6 +544,10 @@ AUGMENT
 <div style={{gridArea:"d3"}}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span className="skillAllocated">0/1</span><em className="skillName">Launcher Charge Grouping</em></div>
 <div style={{gridArea:"e1"}}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Attack-Ranger</em></div>
 <div style={{gridArea:"f1"}}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div>
+<div style={{gridArea:"a5"}}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div>
+<div style={{gridArea:"a6"}}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div>
+
+
 </div>
 </div>
 <div className="skillPoints">Your Skill Points&emsp;&emsp;6&emsp;&emsp;&emsp;SP&emsp;&emsp;&emsp;&emsp;0</div>

src/style.css

@@ -582,7 +582,7 @@ li.r4 {
 	vertical-align: middle;
 }
 .pageControlDetails {
-	background-color: rgba(24, 36, 48, 0.66) !important;
+	background-color: rgba(25, 30, 35, 0.66) !important;
 }
 .selected {
 	background: linear-gradient(135deg,#60461b,#b0a34e);
@@ -690,12 +690,14 @@ option {
 	margin: 10px 10px 0 10px;
 }
 .treeSelectBox {
-	min-width: 150px;
+	flex: 0 1 auto;
+	margin: 0 10px 0 0;
+	align-self: flex-start;
 }
 .treeList {
 	padding: 0 2px;
 }
-.treelist li {
+.treeList li {
 	background-color: rgba(128,128,128,0.33);
 	color: white;
 	margin: 5px 0 0 0;
@@ -715,20 +717,24 @@ li.treeListSub {
 	margin-right: 5px;
 }
 .skillTreeBox {
-	max-width: 1108px;
+	flex: 1 3 1108px;
+	margin: 0;
+	min-width: 171px;
+	min-height: auto;
 }
 .skillTreeContainer {
-	max-height: 400px;
+	overflow-x: auto;
 	overflow-y: scroll;
 	margin: 10px 5px 0 10px;
 	padding: 2px;
 	-webkit-overflow-scrolling: touch;
-}
+	max-height: calc(90vh - 150px);
+}/*
 @media screen and (min-width:390px) and (max-width:860px) {
 .skillTreeContainer {
 	max-height: 300px;
 }
-}
+}*/
 .skillTreeGrid {
 	display: grid;
 	grid-template-columns: repeat(6, 171px);
@@ -983,7 +989,14 @@ button{
 	outline: 0;
 	grid-column: 2;
 	grid-row: 2;
-  }
+}
+.modalSkillTree {
+	outline: 0;
+	grid-column: 2;
+	grid-row: 2;
+	display: flex;
+	flex-flow: row nowrap;
+}
 .boxModal {
 	animation: fadeIn 0.15s;
 	max-width: 580px;