From c2a0950660f02921fabfcd314faf524932d96377 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 9 Jan 2026 15:34:48 +0800
Subject: [PATCH] fix: button ui problem

---
 web/app/components/app/create-app-dialog/app-card/index.tsx | 6 +++---
 web/app/components/explore/app-card/index.tsx               | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index b047c13a17..15cfbd5411 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -64,13 +64,13 @@ const AppCard = ({
       </div>
       {canCreate && (
         <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
-          <div className={cn('flex h-8 w-full items-center space-x-2')}>
-            <Button variant="primary" className="grow" onClick={() => onCreate()}>
+          <div className={cn('grid h-8 w-full grid-cols-1 items-center space-x-2', isTrialApp && 'grid-cols-2')}>
+            <Button variant="primary" onClick={() => onCreate()}>
               <PlusIcon className="mr-1 h-4 w-4" />
               <span className="text-xs">{t('newApp.useTemplate', { ns: 'app' })}</span>
             </Button>
             {isTrialApp && (
-              <Button className="w-full" onClick={showTryAPPPanel(app.app_id)}>
+              <Button onClick={showTryAPPPanel(app.app_id)}>
                 <RiInformation2Line className="mr-1 size-4" />
                 <span>{t('appCard.try', { ns: 'explore' })}</span>
               </Button>
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 23ba65b600..7d6df09b03 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -74,13 +74,13 @@ const AppCard = ({
       </div>
       {isExplore && (canCreate || isTrialApp) && (
         <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
-          <div className={cn('flex h-8 w-full items-center space-x-2')}>
-            <Button variant="primary" className="h-7 grow" onClick={() => onCreate()}>
+          <div className={cn('grid h-8 w-full grid-cols-1 space-x-2', isTrialApp && 'grid-cols-2')}>
+            <Button variant="primary" className="h-7" onClick={() => onCreate()}>
               <PlusIcon className="mr-1 h-4 w-4" />
               <span className="text-xs">{t('appCard.addToWorkspace', { ns: 'explore' })}</span>
             </Button>
             {isTrialApp && (
-              <Button className="w-full" onClick={showTryAPPPanel(app.app_id)}>
+              <Button className="h-7" onClick={showTryAPPPanel(app.app_id)}>
                 <RiInformation2Line className="mr-1 size-4" />
                 <span>{t('appCard.try', { ns: 'explore' })}</span>
               </Button>