From fb6fe4a32bb64a3115fc9de1cc165ea1835c7d59 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 18 Aug 2025 20:40:45 +0800
Subject: [PATCH] fix(billing): adjust z-index for noise effects in pricing
 plans and self-hosted plan items

---
 web/app/components/billing/pricing/index.tsx              | 4 ++--
 .../billing/pricing/plans/self-hosted-plan-item/index.tsx | 4 ++--
 .../components/rag-pipeline-header/publisher/popup.tsx    | 8 +++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx
index 9e4f55a62c..98072ec7c5 100644
--- a/web/app/components/billing/pricing/index.tsx
+++ b/web/app/components/billing/pricing/index.tsx
@@ -41,7 +41,7 @@ const Pricing: FC<PricingProps> = ({
       onClick={e => e.stopPropagation()}
     >
       <div className='relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden'>
-        <div className='absolute -top-12 left-0 right-0'>
+        <div className='absolute -top-12 left-0 right-0 -z-10'>
           <NoiseTop />
         </div>
         <Header onClose={onCancel} />
@@ -58,7 +58,7 @@ const Pricing: FC<PricingProps> = ({
           canPay={canPay}
         />
         <Footer pricingPageURL={pricingPageURL} />
-        <div className='absolute -bottom-12 left-0 right-0'>
+        <div className='absolute -bottom-12 left-0 right-0 -z-10'>
           <NoiseBottom />
         </div>
       </div>
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
index 1db5c39b81..34ad4c47fa 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
@@ -22,7 +22,7 @@ const STYLE_MAP = {
     icon: <Premium />,
     bg: 'bg-billing-plan-card-premium-bg opacity-10',
     noise: (
-      <div className='absolute -top-12 left-0 right-0'>
+      <div className='absolute -top-12 left-0 right-0 -z-10'>
         <PremiumNoise />
       </div>
     ),
@@ -31,7 +31,7 @@ const STYLE_MAP = {
     icon: <Enterprise />,
     bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
     noise: (
-      <div className='absolute -top-12 left-0 right-0'>
+      <div className='absolute -top-12 left-0 right-0 -z-10'>
         <EnterpriseNoise />
       </div>
     ),
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 160a3e6dcd..d8c1b6670c 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -255,10 +255,12 @@ const Popup = () => {
           disabled={!publishedAt || isPublishingAsCustomizedPipeline}
         >
           <div className='flex grow items-center gap-x-2'>
-            <RiHammerLine className='h-4 w-4' />
-            {t('pipeline.common.publishAs')}
+            <RiHammerLine className='h-4 w-4 shrink-0' />
+            <span className='grow truncate text-left' title={t('pipeline.common.publishAs')}>
+              {t('pipeline.common.publishAs')}
+            </span>
             {!isAllowPublishAsKnowledgePipeline && (
-              <PremiumBadge className='cursor-pointer select-none' size='s' color='indigo'>
+              <PremiumBadge className='shrink-0 cursor-pointer select-none' size='s' color='indigo'>
                 <SparklesSoft className='flex size-3 items-center text-components-premium-badge-indigo-text-stop-0' />
                 <span className='system-2xs-medium p-0.5'>
                   {t('billing.upgradeBtn.encourageShort')}