From 2eb564696ea1cf2a44329956461e231c4ce30a04 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 24 Jun 2026 19:19:33 +0800
Subject: [PATCH] fix: banner has ui problem in small screen (#37879)

---
 .../explore/banner/__tests__/banner-item.spec.tsx  |  4 ++--
 web/app/components/explore/banner/banner-item.tsx  | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/app/components/explore/banner/__tests__/banner-item.spec.tsx b/web/app/components/explore/banner/__tests__/banner-item.spec.tsx
index f2b38ab0b94..721c24c95c7 100644
--- a/web/app/components/explore/banner/__tests__/banner-item.spec.tsx
+++ b/web/app/components/explore/banner/__tests__/banner-item.spec.tsx
@@ -346,7 +346,7 @@ describe('BannerItem', () => {
       expect(wrapper).toHaveClass('rounded-2xl')
     })
 
-    it('keeps a fixed height even when text content is empty', () => {
+    it('keeps the desktop height even when text content is empty', () => {
       const banner = createMockBanner({
         content: {
           'category': '',
@@ -359,7 +359,7 @@ describe('BannerItem', () => {
       const { container } = renderBannerItem(banner)
       const wrapper = container.firstChild as HTMLElement
 
-      expect(wrapper).toHaveClass('h-[184px]')
+      expect(wrapper).toHaveClass('xl:h-[184px]')
     })
   })
 })
diff --git a/web/app/components/explore/banner/banner-item.tsx b/web/app/components/explore/banner/banner-item.tsx
index c4dbfa39119..e2f64b6a5d4 100644
--- a/web/app/components/explore/banner/banner-item.tsx
+++ b/web/app/components/explore/banner/banner-item.tsx
@@ -130,7 +130,7 @@ export function BannerItem({
 
   return (
     <div
-      className="flex h-[184px] w-full cursor-pointer items-start overflow-hidden rounded-2xl bg-components-panel-on-panel-item-bg shadow-xs"
+      className="flex h-[224px] w-full cursor-pointer items-start overflow-hidden rounded-2xl bg-components-panel-on-panel-item-bg shadow-xs xl:h-[184px]"
       onClick={handleBannerClick}
     >
       <div className="flex min-w-px flex-1 flex-col items-end self-stretch rounded-2xl py-6 pl-8">
@@ -140,7 +140,7 @@ export function BannerItem({
           </p>
         </div>
 
-        <div className="flex w-full flex-col gap-3 py-1">
+        <div className="flex w-full flex-col gap-3 py-1 max-xl:flex-1 max-xl:justify-between">
           <div
             ref={textAreaRef}
             className="grid w-full grid-cols-[minmax(0,680px)_minmax(240px,600px)] gap-x-1 max-xl:grid-cols-1"
@@ -159,11 +159,11 @@ export function BannerItem({
           </div>
 
           <div
-            className="grid w-full grid-cols-[minmax(0,680px)_minmax(240px,600px)] gap-x-1 max-xl:grid-cols-1"
+            className="flex w-full items-center justify-between gap-4 pr-4 xl:grid xl:grid-cols-[minmax(0,680px)_minmax(240px,600px)] xl:gap-x-1 xl:pr-0"
             style={responsiveStyle}
           >
             <div
-              className="flex min-w-0 items-center gap-[6px] py-1"
+              className="flex min-w-0 items-center gap-[6px] py-1 max-xl:flex-1"
               style={viewMoreStyle}
             >
               <div className="flex h-4 w-4 items-center justify-center rounded-full bg-text-accent p-[2px]">
@@ -174,7 +174,7 @@ export function BannerItem({
               </span>
             </div>
 
-            <div className="flex min-w-0 items-center gap-2 py-1 pr-10">
+            <div className="flex min-w-0 shrink-0 items-center gap-2 py-1 xl:pr-10">
               {/* Slide navigation indicators */}
               <div className="flex items-center gap-1">
                 {indicatorItems.map(({ id, index }) => (
@@ -196,13 +196,13 @@ export function BannerItem({
         </div>
       </div>
 
-      <div className="flex w-60 max-w-60 shrink-0 flex-col items-end self-stretch p-2 max-lg:hidden">
+      <div className="flex w-60 max-w-60 shrink-0 flex-col items-end self-stretch p-2 max-xl:w-[360px] max-xl:max-w-[360px] max-lg:hidden">
         <img
           src={imgSrc}
           alt={title}
           width={224}
           height={168}
-          className="h-[168px] w-56 shrink-0 rounded-xl object-cover"
+          className="h-full w-full shrink-0 rounded-xl object-cover"
         />
       </div>
     </div>