Address layout comments

public/stylesheets/new-ui-styles.css

@@ -403,6 +403,7 @@ body.t-s9 {
 
 .o-primary-btn--dimension-reset {
   display: flex;
+  width: 25rem;
   height: 6rem;
   justify-content: center;
   align-items: center;

src/components/GenericDimensionRowText.vue

@@ -23,6 +23,11 @@ export default {
       required: true
     },
   },
+  data() {
+    return {
+      width: 0,
+    };
+  },
   computed: {
     rateText() {
       return this.tier < 8
@@ -31,12 +36,17 @@ export default {
     },
   },
   methods: {
+    update() {
+      // Needs to be reactive or else rows that don't have changing values (eg. the highest dimension and any higher
+      // locked ones) won't change layout when the window size changes
+      this.width = window.innerWidth;
+    },
     adjustableTextStyle() {
       return {
         display: "flex",
         "text-align": "left",
         width: "100%",
-        "flex-direction": window.innerWidth < 1450 ? "column" : "row",
+        "flex-direction": this.width < 1450 ? "column" : "row",
         "justify-content": "space-between",
         "align-items": "center",
       };

src/components/tabs/antimatter-dimensions/ModernAntimatterDimensionRow.vue

@@ -40,7 +40,7 @@ export default {
       return this.buyUntil10 ? format(this.until10Cost) : format(this.singleCost);
     },
     amountDisplay() {
-      return this.tier < 8 ? format(this.amount, 2, 0) : formatInt(this.amount);
+      return this.tier < 8 ? format(this.amount, 2) : formatInt(this.amount);
     },
     continuumString() {
       return formatFloat(this.continuumValue, 2);
@@ -58,8 +58,8 @@ export default {
     },
     buttonPrefix() {
       if (this.isCapped) return "Shattered by Enslaved";
-      if (this.isContinuumActive) return "Continuum:";
-      return `Buy ${this.howManyCanBuy}`;
+      if (this.isContinuumActive) return "Continuum: ";
+      return `Buy ${this.howManyCanBuy}, `;
     },
     buttonValue() {
       if (this.isCapped) return "";
@@ -149,7 +149,7 @@ export default {
       >
         <div
           v-tooltip="boughtTooltip"
-          class="button-content"
+          class="button-content l-modern-buy-ad-text"
           :class="tutorialClass()"
         >
           <div>
@@ -176,3 +176,10 @@ export default {
     </div>
   </div>
 </template>
+
+<style scoped>
+.l-modern-buy-ad-text {
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/components/tabs/infinity-dimensions/ModernInfinityDimensionRow.vue

@@ -58,7 +58,7 @@ export default {
       return `Reach ${formatPostBreak(InfinityDimension(this.tier).amRequirement)} AM`;
     },
     hasLongText() {
-      return this.costDisplay.length > 20;
+      return this.costDisplay.length > 15;
     },
     capTooltip() {
       if (this.enslavedRunning) return `Enslaved prevents the purchase of more than ${format(10)} Infinity Dimensions`;

src/components/tabs/time-dimensions/ModernTimeDimensionRow.vue

@@ -65,7 +65,7 @@ export default {
       return this.isCapped ? "Capped" : `${this.showCostTitle ? "Cost: " : ""}${format(this.cost, 2)} EP`;
     },
     hasLongText() {
-      return this.buttonContents.length > 20;
+      return this.buttonContents.length > 15;
     },
     showCostTitle() {
       return this.cost.exponent < 1e6;