From 9230d3cbc95b3ef88fc6ba9dea264dd69dcc1b16 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Sat, 28 Feb 2026 15:26:16 +0800
Subject: [PATCH] fix: streamline purchase embed layout with floating open
 button

---
 backend/cmd/server/VERSION                    |  2 +-
 .../views/user/PurchaseSubscriptionView.vue   | 41 ++++++++-----------
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/backend/cmd/server/VERSION b/backend/cmd/server/VERSION
index 24931aff..6c38dc27 100644
--- a/backend/cmd/server/VERSION
+++ b/backend/cmd/server/VERSION
@@ -1 +1 @@
-0.1.87.3
+0.1.87.4
\ No newline at end of file
diff --git a/frontend/src/views/user/PurchaseSubscriptionView.vue b/frontend/src/views/user/PurchaseSubscriptionView.vue
index 30f3893b..c7504a0e 100644
--- a/frontend/src/views/user/PurchaseSubscriptionView.vue
+++ b/frontend/src/views/user/PurchaseSubscriptionView.vue
@@ -1,30 +1,6 @@
 <template>
   <AppLayout>
     <div class="purchase-page-layout">
-      <div class="flex items-start justify-between gap-4">
-        <div>
-          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
-            {{ t('purchase.title') }}
-          </h2>
-          <p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
-            {{ t('purchase.description') }}
-          </p>
-        </div>
-
-        <div class="flex items-center gap-2">
-          <a
-            v-if="isValidUrl"
-            :href="purchaseUrl"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="btn btn-secondary btn-sm"
-          >
-            <Icon name="externalLink" size="sm" class="mr-1.5" :stroke-width="2" />
-            {{ t('purchase.openInNewTab') }}
-          </a>
-        </div>
-      </div>
-
       <div class="card flex-1 min-h-0 overflow-hidden">
         <div v-if="loading" class="flex h-full items-center justify-center py-12">
           <div
@@ -71,6 +47,15 @@
         </div>
 
         <div v-else class="purchase-embed-shell">
+          <a
+            :href="purchaseUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn btn-secondary btn-sm purchase-open-fab"
+          >
+            <Icon name="externalLink" size="sm" class="mr-1.5" :stroke-width="2" />
+            {{ t('purchase.openInNewTab') }}
+          </a>
           <iframe
             :src="purchaseUrl"
             class="purchase-embed-frame"
@@ -176,16 +161,22 @@ onUnmounted(() => {
 
 <style scoped>
 .purchase-page-layout {
-  @apply flex flex-col gap-6;
+  @apply flex flex-col;
   height: calc(100vh - 64px - 4rem);
 }
 
 .purchase-embed-shell {
+  @apply relative;
   @apply h-full w-full overflow-auto rounded-2xl;
   @apply bg-gradient-to-b from-gray-50 to-white dark:from-dark-900 dark:to-dark-950;
   @apply p-3 sm:p-4;
 }
 
+.purchase-open-fab {
+  @apply absolute right-3 top-3 z-10;
+  @apply shadow-sm backdrop-blur supports-[backdrop-filter]:bg-white/80;
+}
+
 .purchase-embed-frame {
   display: block;
   margin: 0 auto;