fix: show per dashboard text on on products with many dashboards

See: BEDS-1257

Author: enzo-bitfly

frontend/components/pricing/PremiumFeature.vue

@@ -135,6 +135,11 @@ defineProps<Props>()
   }
 }
 
+.tooltip {
+  display: flex;
+  align-items: center;
+}
+
 .tooltip-content {
   width: 130px;
   text-align: left;

frontend/components/pricing/PremiumProductBox.vue

@@ -201,7 +201,9 @@ const mainFeatures = computed<Feature[]>(() => {
     },
     {
       available: true,
-      name: $t('pricing.premium_product.max_effective_balance', { amount: maxDashboardEffectiveBalance }),
+      name: product.premium_perks.validator_dashboards === 1
+        ? $t('pricing.premium_product.max_effective_balance', { amount: maxDashboardEffectiveBalance })
+        : $t('pricing.premium_product.max_effective_balance_per_dashboard', { amount: maxDashboardEffectiveBalance }),
       percentage: percentages.value.effectiveBalancePerDashboard,
       subtext: $t('pricing.per_min_validator_deposit', {
         amount: formatFiatCurrency(Number(pricePerOldMaxEffectiveBalance.value), {
@@ -462,16 +464,6 @@ const minorFeatures = computed<Feature[]>(() => {
         text-align: left;
       }
 
-      .info-badge {
-        background-color: var(--subcontainer-background);
-        font-size: 0.7rem;
-        padding: 0.25rem 0.15rem;
-        border-radius: 4px;
-        gap: 0.25rem;
-        justify-content: center;
-        margin-bottom: 0.75rem;
-      }
-
       .main-features-container {
         gap: 15px;
         margin-bottom: 18px;
@@ -484,6 +476,16 @@ const minorFeatures = computed<Feature[]>(() => {
     }
   }
 
+  .info-badge {
+    background-color: var(--subcontainer-background);
+    font-size: 0.7rem;
+    padding: 0.25rem 0.15rem;
+    border-radius: 4px;
+    gap: 0.25rem;
+    justify-content: center;
+    margin-bottom: 0.75rem;
+  }
+
   .submit-button--downgrade {
     background-color: transparent;
     color: var(--text-color-discreet);

frontend/i18n/locales/en.json

@@ -982,6 +982,7 @@
             "coming_soon": "(coming soon)",
             "manage_dashboard_via_api": "Manage Dashboard via API",
             "max_effective_balance": "{amount} Max Stake",
+            "max_effective_balance_per_dashboard": "{amount} Max Stake per Dashboard",
             "max_effective_balance_tooltip": "Alternative term: {amount} maximum effective balance",
             "mobile_app_widget": "Mobile App Widget",
             "no_ads": "No Ads",