css

src/TestPanel.js

@@ -748,9 +748,12 @@ useEffect(()=>{
     }  
   }}
   displayFunction={(item)=>{
-  return <li className={"itemwep r"+item[WEAPON_WEAPON].rarity} onClick={()=>{setSelectedWeapon(item);setWeaponSelectWindowOpen(false)}}><div className="itemWeaponWrapper"><img className="itemimg" alt="" src={DisplayIcon(item[WEAPON_EXISTENCE_DATA]?.icon)} /><em className="rifle">{GetSpecialWeaponName(item)}</em></div><br /><span className="atk">{item[WEAPON_WEAPON].atk}</span> <ExpandTooltip id={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id} tooltip={<>{item[WEAPON_POTENTIAL_TOOLTIP].map((pot,i)=><React.Fragment key={i}>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it,ii)=><React.Fragment key={ii}>{it}<br/> </React.Fragment>):<React.Fragment key={i}/>}</React.Fragment>)}</>}>
+  return<div className={"itemWrapper r"+item[WEAPON_WEAPON].rarity}><div className="itemImgWrapper"><img alt="" src={DisplayIcon(item[WEAPON_EXISTENCE_DATA]?.icon)} /></div><div className="itemNameWrapper rifle">{GetSpecialWeaponName(item)}</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">{item[WEAPON_WEAPON].atk}</span>
+    
+    <ExpandTooltip id={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id} tooltip={<>{item[WEAPON_POTENTIAL_TOOLTIP].map((pot,i)=><React.Fragment key={i}>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it,ii)=><React.Fragment key={ii}>{it}<br/> </React.Fragment>):<React.Fragment key={i}/>}</React.Fragment>)}</>}>
+
     <span className="pot">{item[WEAPON_POTENTIAL].name}</span>
-    </ExpandTooltip></li>}}
+    </ExpandTooltip></div></div>}}
   />
   
 <SelectorWindow title={"Armor Selection - Slot "+armorSlotSelection} modalOpen={armorSelectWindowOpen} setModalOpen={setArmorSelectWindowOpen} GetData={p.GetData}

src/style.css

@@ -437,23 +437,12 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	margin-right: 5px;
 	vertical-align: middle;
 }
-.itemwep {
-	font-size: 10pt;
-}
-
 .itemWeaponWrapper {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	padding-right: 16px;
 }
-.itemwep em {
-	font-size: 12pt;
-	line-height: 28px;
-}
-.itemwep:after {
-	clear:both;
-}
 .rifle:before {
     content: url("./icons/NGSUIItemAssaultRifleMini.png");
 	margin-right: 5px;
@@ -573,6 +562,7 @@ li.selected:hover {
 .itemControlsWrapper > span:nth-child(odd) {
 	background-color: rgba(113,169,189,0.33);
 	cursor: pointer;
+	min-width: 26px;
 }
 .itemControlsWrapper > span:nth-child(odd):hover {
 	background-color: rgba(113,169,189,0.33);
@@ -582,10 +572,11 @@ li.selected:hover {
 }
 .itemControlsWrapper > span:nth-child(2) {
 	background-color:rgba(0,0,0,0.33);
+	min-width: 26px;
 }
 .itemControlsWrapper > span {
 	display:inline-block;
-	padding: 5px 10px;
+	padding: 5px 0;
 	text-align: center;
 	margin: 0 0 0 5px;
 }
@@ -1481,7 +1472,7 @@ p.adminNav hr {
 	top:16px;
 }
 .equipWindow {
-	height: 440px;
+	min-height: 440px;
 }
 .itemDetailsGrid {
 	display: grid;
@@ -1528,8 +1519,9 @@ p.adminNav hr {
 .itemDetailsAugmentWrapper {
 	margin: 10px 0 0 0;
 	display: grid;
-	grid-template-columns: repeat(auto-fit,minmax(100px,200px));
+	grid-template-columns: repeat(2,minmax(125px, 1fr));
 	gap: 10px 30px;
+	
 }
 .itemDetailsAugmentWrapper > div {
 	background-color:rgba(0,0,0,0.33);