feat: dimensional generator styles (#17)

* feat: dimensional generator styles

* feat: remove width limit from buy component

Author: GabenGar

public/updates.js

@@ -3043,7 +3043,7 @@ function tooltip(
       tooltipText += `<${tagName} class='thing pointer noselect thingColor permGenUpgrade' ${events} id='generatorUpgrade${item}'></${tagName}>`;
     }
 
-    tooltipText += `<br/><div id='generatorUpgradeDescription' class='noselect' aria-live='polite'>${usingScreenReader ? "" : "<b>Click an upgrade to learn more about it!</b><br/>"}</div>`;
+    tooltipText += `<br/><div id='generatorUpgradeDescription' aria-live='polite'>${usingScreenReader ? "" : "<b>Click an upgrade to learn more about it!</b><br/>"}</div>`;
     tooltipText += "</div>";
     costText =
       "<b style='color: red'>These upgrades persist through portal and cannot be refunded. Choose wisely! " +

src/entities/main-screen/bottom-row/buy.tsx

@@ -4,7 +4,7 @@ import styles from "./buy.module.scss";
 
 export function BuyColumn() {
   return (
-    <div id="buyCol" className="col-xs-5" style={{ visibility: "hidden" }}>
+    <div id="buyCol" style={{ visibility: "hidden" }}>
       <Queue />
 
       <div id="outerBuyContainer">

src/styles/original/style.scss

@@ -1,3 +1,5 @@
+@use "../sass/variables.scss" as *;
+
 h1,
 h2,
 h3,
@@ -5577,14 +5579,19 @@ sup {
   color: #8c0000;
 }
 
+#generatorUpgradeTooltip {
+  display: flex;
+  flex-flow: row wrap;
+  gap: $size-normal
+}
+
 #generatorUpgradeTitle {
   color: #000040;
 }
 
 .generatorUpgradeTitle {
-  text-align: center;
+  flex: 100%;
   font-weight: bold;
-  padding: 1%;
 }
 
 #magmiteCost,
@@ -5607,11 +5614,11 @@ sup {
 }
 
 #generatorUpgradeDescription {
-  background-color: #777777;
-  padding: 0.5%;
-  margin-top: 1%;
+  flex:100%;
+  min-height: 12em;
   color: #333333;
-  min-height: 6.8vw;
+  background-color: #777777;
+  padding: $size-small;
 }
 
 #generatorNextTick {