Make additional dimension tab layout changes

public/stylesheets/new-ui-styles.css

@@ -403,6 +403,7 @@ body.t-s9 {
   overflow: hidden;
   grid-column: 1 / 11;
   height: 4.4rem;
+  width: 25rem;
   position: relative;
   font-family: Typewriter, serif;
   color: var(--color-text);
@@ -410,6 +411,7 @@ body.t-s9 {
   border: 0.1rem solid var(--color-good);
   border-radius: var(--var-border-radius, 0.5rem);
   padding: 1rem;
+  margin: 0.5rem;
 }
 
 .o-primary-btn--dimension-reset {
@@ -712,7 +714,7 @@ body.t-s9 {
 
 .l-dimension-single-row {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   height: 5.5rem;
   align-content: center;
 }
@@ -747,14 +749,18 @@ body.t-s9 {
   font-size: 1.4rem;
 }
 
+.o-primary-btn--buy-dim {
+  max-width: 25rem;
+}
+
 .o-primary-btn--buy-id {
-  grid-column: 1 / 8;
+  width: 80%;
   height: 4.4rem;
   margin: 0 0.5rem;
 }
 
 .o-primary-btn--id-auto {
-  grid-column: 8 / 11;
+  width: 20%;
   height: 4.4rem;
 }
 
@@ -775,13 +781,13 @@ body.t-s9 {
 }
 
 .o-primary-btn--buy-td {
-  grid-column: 1 / 8;
+  width: 80%;
   height: 4.4rem;
   margin: 0 0.5rem;
 }
 
 .o-primary-btn--buy-td-auto {
-  grid-column: 8 / 11;
+  width: 20%;
   height: 4.4rem;
 }
 

public/stylesheets/styles.css

@@ -1408,24 +1408,30 @@ br {
   margin-right: 0.8rem;
 }
 
+.o-primary-btn--buy-dim {
+  max-width: 25rem;
+}
+
 .o-primary-btn--buy-ad {
   height: 4rem;
   font-size: 1.2rem;
 }
 
 .o-primary-btn--buy-single-ad {
-  grid-column: 1 / 5;
+  width: 40%;
   margin: 0 0.5rem;
 }
 
 .o-primary-btn--buy-10-ad {
-  grid-column: 5 / 11;
+  width: 60%;
   margin: 0 0.5rem;
+  max-width: 20rem;
 }
 
 .o-primary-btn--continuum-ad {
-  grid-column: 1 / 11;
+  width: 100%;
   margin: 0 0.5rem;
+  max-width: 20rem;
 }
 
 .o-primary-btn--dimboost {
@@ -1450,23 +1456,24 @@ br {
   grid-column: 1 / 8;
   height: 3.5rem;
   margin: 0 0.5rem;
+  width: 20rem;
 }
 
 .o-primary-btn--id-auto {
-  grid-column: 8 / 11;
   height: 3.5rem;
+  width: 20%;
   margin: 0 0.5rem;
   font-size: 1rem;
 }
 
 .o-primary-btn--buy-td {
-  grid-column: 1 / 8;
+  width: 80%;
   height: 3.5rem;
   margin: 0 0.5rem;
 }
 
 .o-primary-btn--buy-td-auto {
-  grid-column: 8 / 11;
+  width: 20%;
   height: 3.5rem;
   margin: 0 0.5rem;
   font-size: 1rem;
@@ -2177,7 +2184,7 @@ br {
 
 .l-dimension-single-row {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   height: 3.5rem;
   width: 100%;
   align-content: center;
@@ -2188,11 +2195,10 @@ br {
 }
 
 .l-dim-row-multi-button-container {
-  display: grid;
-  grid-template-columns: repeat(10, 1fr);
-  grid-column: 7 / 9;
-  width: 100%;
-  max-width: 20rem;
+  display: flex;
+  justify-content: flex-end;
+  grid-column: 5 / 6;
+  min-width: 25rem;
 }
 
 .l-dim-row-small-text {

src/components/GenericDimensionRowText.vue

@@ -85,7 +85,7 @@ export default {
   display: flex;
   height: 3.5rem;
   align-content: center;
-  grid-column: 1 / 7;
+  grid-column: 1 / 5;
 }
 
 .c-dim-row__large {

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

@@ -117,7 +117,9 @@ export default {
       return str.length > 20;
     },
     singlesClass() {
-      const small = { "l-dim-row-small-text": this.isLongText(this.singleText) };
+      const small = {
+        "l-dim-row-small-text": this.isLongText(this.singleText) || !this.showCostTitle(this.singleCost)
+      };
       let tutorial;
       switch (this.tier) {
         case 1:
@@ -160,7 +162,7 @@ export default {
       </PrimaryButton>
       <PrimaryButton
         :enabled="(isAffordableUntil10 || isContinuumActive) && !isCapped && isUnlocked"
-        class="o-primary-btn--buy-ad"
+        class="o-primary-btn--buy-ad o-primary-btn--buy-dim"
         :class="{
           'o-primary-btn--buy-10-ad': !isContinuumActive,
           'o-primary-btn--continuum-ad': isContinuumActive,

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

@@ -134,7 +134,7 @@ export default {
       <PrimaryButton
         v-tooltip="capTooltip"
         :enabled="isAvailableForPurchase || (!isUnlocked && canUnlock)"
-        class="o-primary-btn--buy-id"
+        class="o-primary-btn--buy-id o-primary-btn--buy-dim"
         :class="{ 'l-dim-row-small-text': hasLongText }"
         @click="buySingleInfinityDimension"
       >

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

@@ -130,7 +130,7 @@ export default {
       <PrimaryButton
         v-tooltip="capTooltip"
         :enabled="isAvailableForPurchase || (!isUnlocked && canUnlock)"
-        class="o-primary-btn--buy-id o-primary-btn o-primary-btn--new"
+        class="o-primary-btn--buy-id o-primary-btn o-primary-btn--new o-primary-btn--buy-dim"
         :class="{ 'l-dim-row-small-text': hasLongText }"
         @click="buySingleInfinityDimension"
       >

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

@@ -128,7 +128,7 @@ export default {
       <PrimaryButton
         v-tooltip="tooltipContents"
         :enabled="isAvailableForPurchase && !isCapped"
-        class="o-primary-btn--buy-td"
+        class="o-primary-btn--buy-td o-primary-btn--buy-dim"
         :class="{ 'l-dim-row-small-text': hasLongText }"
         @click="buyTimeDimension"
       >

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

@@ -130,7 +130,7 @@ export default {
       <PrimaryButton
         v-tooltip="tooltipContents"
         :enabled="isAvailableForPurchase && !isCapped"
-        class="o-primary-btn--buy-td o-primary-btn o-primary-btn--new"
+        class="o-primary-btn--buy-td o-primary-btn o-primary-btn--new o-primary-btn--buy-dim"
         :class="{ 'l-dim-row-small-text': hasLongText }"
         @click="buyTimeDimension"
       >