From 8697aa3fbb00adfa56e97cd02db0f03ad2be3e82 Mon Sep 17 00:00:00 2001
From: Codex <codex@local.dev>
Date: Tue, 28 Apr 2026 01:20:54 +0800
Subject: [PATCH] Polish page QA experience issues

---
 src/app/(frontend)/[locale]/reviews/page.tsx  | 44 ++++++++++---------
 .../[locale]/support/faq/faq-browser.tsx      | 10 ++---
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/app/(frontend)/[locale]/reviews/page.tsx b/src/app/(frontend)/[locale]/reviews/page.tsx
index 23c7a21..a124b36 100644
--- a/src/app/(frontend)/[locale]/reviews/page.tsx
+++ b/src/app/(frontend)/[locale]/reviews/page.tsx
@@ -183,29 +183,31 @@ function ReviewCard({ item, locale }: { item: ProductReview; locale: Locale }) {
   const sourceName = truncateSourceName(item.sourceName)
 
   return (
-    <a
-      href={item.reviewUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="group flex h-full flex-col overflow-hidden rounded-[8px] bg-white shadow-[0_12px_34px_rgba(15,23,42,0.05)] ring-1 ring-black/7 transition hover:-translate-y-0.5 hover:ring-black/12"
-    >
-      <div className="h-[150px] shrink-0 bg-subtle sm:h-[138px] xl:h-[128px]">
-        {imageUrl ? <img src={imageUrl} alt="" className="h-full w-full object-cover" /> : null}
-      </div>
-      <div className="flex flex-1 flex-col p-3.5">
-        <div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.16em] text-text-muted">
-          {productLabel ? <span>{productLabel}</span> : null}
+    <article className="h-full">
+      <a
+        href={item.reviewUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group flex h-full flex-col overflow-hidden rounded-[8px] bg-white shadow-[0_12px_34px_rgba(15,23,42,0.05)] ring-1 ring-black/7 transition hover:-translate-y-0.5 hover:ring-black/12"
+      >
+        <div className="h-[150px] shrink-0 bg-subtle sm:h-[138px] xl:h-[128px]">
+          {imageUrl ? <img src={imageUrl} alt="" className="h-full w-full object-cover" /> : null}
         </div>
-        <h2 className="mt-1.5 line-clamp-2 min-h-[2.75rem] text-[15px] font-medium leading-snug tracking-[-0.02em]">
-          {item.title}
-        </h2>
-        {copy ? <p className="mt-2 line-clamp-2 text-[13px] leading-5 text-text-secondary">{copy}</p> : null}
-        <div className="mt-auto flex items-end justify-between gap-3 pt-3 text-[11px] uppercase tracking-[0.14em] text-text-muted">
-          <span>{item.publishedAt ? formatDate(item.publishedAt, locale) : ''}</span>
-          {sourceName ? <span className="max-w-[20ch] truncate text-right">{sourceName}</span> : null}
+        <div className="flex flex-1 flex-col p-3.5">
+          <div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.16em] text-text-muted">
+            {productLabel ? <span>{productLabel}</span> : null}
+          </div>
+          <h2 className="mt-1.5 line-clamp-2 min-h-[2.75rem] text-[15px] font-medium leading-snug tracking-[-0.02em]">
+            {item.title}
+          </h2>
+          {copy ? <p className="mt-2 line-clamp-2 text-[13px] leading-5 text-text-secondary">{copy}</p> : null}
+          <div className="mt-auto flex items-end justify-between gap-3 pt-3 text-[11px] uppercase tracking-[0.14em] text-text-muted">
+            <span>{item.publishedAt ? formatDate(item.publishedAt, locale) : ''}</span>
+            {sourceName ? <span className="max-w-[20ch] truncate text-right">{sourceName}</span> : null}
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </article>
   )
 }
 
diff --git a/src/app/(frontend)/[locale]/support/faq/faq-browser.tsx b/src/app/(frontend)/[locale]/support/faq/faq-browser.tsx
index 57d2dbb..77342da 100644
--- a/src/app/(frontend)/[locale]/support/faq/faq-browser.tsx
+++ b/src/app/(frontend)/[locale]/support/faq/faq-browser.tsx
@@ -58,8 +58,8 @@ export function FaqBrowser({
   const totalCount = groups.reduce((total, group) => total + group.faqs.length, 0)
 
   return (
-    <div className="grid gap-8 lg:grid-cols-[300px,minmax(0,1fr)] lg:items-start">
-      <aside className="lg:sticky lg:top-24">
+    <div className="grid min-w-0 gap-8 lg:grid-cols-[300px,minmax(0,1fr)] lg:items-start">
+      <aside className="min-w-0 lg:sticky lg:top-24">
         <div className="border-b border-black/10 pb-5">
           <div className="text-[12px] font-medium uppercase tracking-[0.24em] text-black/42">
             {locale === 'zh' ? '检索' : 'Find Answers'}
@@ -122,7 +122,7 @@ export function FaqBrowser({
         </div>
       </aside>
 
-      <div>
+      <div className="min-w-0">
         <div className="mb-5 flex flex-col justify-between gap-3 border-b border-black/10 pb-5 md:flex-row md:items-end">
           <div>
             <div className="text-[12px] font-medium uppercase tracking-[0.24em] text-black/42">
@@ -167,12 +167,12 @@ export function FaqBrowser({
               {group.faqs.map((faq, index) => (
                 <details
                   key={faq.id}
-                  className="group px-5 py-0 transition-colors open:bg-white md:px-7"
+                  className="group min-w-0 px-5 py-0 transition-colors open:bg-white md:px-7"
                   open={index === 0 && !deferredQuery}
                 >
                   <summary className="cursor-pointer list-none py-5">
                     <div className="flex items-start justify-between gap-6">
-                      <h4 className="max-w-[760px] text-[18px] font-medium leading-7 tracking-[-0.025em] text-text-primary">
+                      <h4 className="min-w-0 max-w-[760px] break-words text-[18px] font-medium leading-7 tracking-[-0.025em] text-text-primary">
                         {faq.question}
                       </h4>
                       <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center bg-subtle text-lg leading-none text-text-muted transition group-open:rotate-45 group-open:bg-black group-open:text-white">