Fix: Tooltip fix (#4535)

packages/frontend-2/components/settings/workspaces/billing/Page.vue

@@ -22,20 +22,22 @@
         <SettingsWorkspacesBillingUsage :slug="slug" />
       </section>
 
-      <section class="flex flex-col gap-y-4 md:gap-y-6">
-        <SettingsSectionHeader title="Upgrade your plan" subheading />
-        <PricingTable
-          :slug="slug"
-          :workspace-id="workspace?.id"
-          :role="workspace?.role as WorkspaceRoles"
-          :currency="workspace?.subscription?.currency"
-        />
-      </section>
+      <ClientOnly>
+        <section class="flex flex-col gap-y-4 md:gap-y-6">
+          <SettingsSectionHeader title="Upgrade your plan" subheading />
+          <PricingTable
+            :slug="slug"
+            :workspace-id="workspace?.id"
+            :role="workspace?.role as WorkspaceRoles"
+            :currency="workspace?.subscription?.currency"
+          />
+        </section>
 
-      <section class="flex flex-col gap-y-4 md:gap-y-6">
-        <SettingsSectionHeader title="Add-ons" subheading />
-        <SettingsWorkspacesBillingAddOns :slug="slug" :workspace-id="workspace?.id" />
-      </section>
+        <section class="flex flex-col gap-y-4 md:gap-y-6">
+          <SettingsSectionHeader title="Add-ons" subheading />
+          <SettingsWorkspacesBillingAddOns :slug="slug" :workspace-id="workspace?.id" />
+        </section>
+      </ClientOnly>
     </div>
   </div>
 </template>

packages/frontend-2/components/settings/workspaces/billing/addOns/Card.vue

@@ -9,7 +9,11 @@
       <slot name="subtitle" />
     </div>
     <div class="flex items-center gap-x-2">
-      <div v-if="button" :key="buttonId" v-tippy="button.disabledMessage">
+      <div
+        v-if="button"
+        :key="`${buttonId}-${button.disabled}`"
+        v-tippy="button.disabledMessage"
+      >
         <FormButton
           v-bind="button.props || {}"
           :disabled="button.props?.disabled || button.disabled"