From 42225dc3509ce878142f7beb59d68df36d95f128 Mon Sep 17 00:00:00 2001
From: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
Date: Wed, 2 Sep 2026 01:53:52 +0800
Subject: [PATCH] fix(review): wrap long mobile labels

Signed-off-by: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
---
 .../features/social/skill-reviews.test.tsx    | 25 +++++++++++++++++++
 web/src/features/social/skill-reviews.tsx     |  6 ++---
 web/src/pages/skill-detail.test.tsx           | 14 +++++++++++
 web/src/pages/skill-detail.tsx                |  2 +-
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/web/src/features/social/skill-reviews.test.tsx b/web/src/features/social/skill-reviews.test.tsx
index de3710e4..c150213a 100644
--- a/web/src/features/social/skill-reviews.test.tsx
+++ b/web/src/features/social/skill-reviews.test.tsx
@@ -135,6 +135,31 @@ describe('skill reviews', () => {
     expect(mocks.requestedPages[mocks.requestedPages.length - 1]).toBe(0)
   })
 
+  it('wraps long reviewer names and review text', () => {
+    const reviewer = 'review_author_1788284593_353294'
+    const reviewText = 'x'.repeat(200)
+    mocks.pages.set(0, {
+      items: [{
+        id: 8,
+        displayName: reviewer,
+        score: 5,
+        reviewText,
+        status: 'VISIBLE',
+        authoredByViewer: false,
+        createdAt: '2026-09-01T00:00:00Z',
+        updatedAt: '2026-09-01T00:00:00Z',
+      }],
+      total: 1,
+      page: 0,
+      size: 20,
+    })
+
+    render(<SkillReviews skillId={10} canInteract onRequireLogin={vi.fn()} />)
+
+    expect(screen.getByText(reviewer).className).toContain('[overflow-wrap:anywhere]')
+    expect(screen.getByText(reviewText).className).toContain('[overflow-wrap:anywhere]')
+  })
+
   it('keeps review interaction copy in every supported locale', () => {
     for (const locale of [en, zh, ru]) {
       expect(locale.skillReviews.ratingDisplay).toBeTruthy()
diff --git a/web/src/features/social/skill-reviews.tsx b/web/src/features/social/skill-reviews.tsx
index 00a70fd5..0e627e49 100644
--- a/web/src/features/social/skill-reviews.tsx
+++ b/web/src/features/social/skill-reviews.tsx
@@ -186,8 +186,8 @@ function ReviewRow({ skillId, review, canModerate }: {
         )}
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="flex flex-wrap items-center gap-2">
-              <span className="font-medium text-foreground">{review.displayName}</span>
+            <div className="min-w-0 max-w-full flex flex-wrap items-center gap-2">
+              <span className="min-w-0 max-w-full break-words font-medium text-foreground [overflow-wrap:anywhere]">{review.displayName}</span>
               <ReviewStars value={review.score} />
               {hidden ? (
                 <span className="rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive">
@@ -199,7 +199,7 @@ function ReviewRow({ skillId, review, canModerate }: {
               {formatLocalDateTime(review.updatedAt, i18n.language)}
             </span>
           </div>
-          <p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-foreground/90">{review.reviewText}</p>
+          <p className="mt-2 whitespace-pre-wrap break-words text-sm leading-6 text-foreground/90 [overflow-wrap:anywhere]">{review.reviewText}</p>
           {hidden && review.moderationReason ? (
             <p className="mt-2 text-xs text-muted-foreground">
               {t('skillReviews.moderationReason', { reason: review.moderationReason })}
diff --git a/web/src/pages/skill-detail.test.tsx b/web/src/pages/skill-detail.test.tsx
index 4cdfc9aa..b9ba9a71 100644
--- a/web/src/pages/skill-detail.test.tsx
+++ b/web/src/pages/skill-detail.test.tsx
@@ -348,6 +348,20 @@ describe('SkillDetailPage', () => {
     expect(html).not.toContain('skillDetail.deleteSkill')
   })
 
+  it('wraps a long skill name instead of widening the mobile page', () => {
+    useSkillDetailMock.mockReturnValue({
+      data: createSkill({ displayName: 'review-runtime-1788284593-353294' }),
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    })
+
+    const html = renderToStaticMarkup(<SkillDetailPage />)
+
+    expect(html).toContain('text-balance break-words text-4xl')
+    expect(html).toContain('[overflow-wrap:anywhere]')
+  })
+
   it('shows the label management panel for a user who can manage the skill lifecycle', () => {
     useSkillDetailMock.mockReturnValue({
       data: createSkill({
diff --git a/web/src/pages/skill-detail.tsx b/web/src/pages/skill-detail.tsx
index a0d77f2b..db43c094 100644
--- a/web/src/pages/skill-detail.tsx
+++ b/web/src/pages/skill-detail.tsx
@@ -838,7 +838,7 @@ export function SkillDetailPage() {
               </span>
             )}
           </div>
-          <h1 className="text-balance text-4xl font-bold font-heading text-foreground">{skill.displayName}</h1>
+          <h1 className="text-balance break-words text-4xl font-bold font-heading text-foreground [overflow-wrap:anywhere]">{skill.displayName}</h1>
           {skill.ownerDisplayName && (
             <div className="flex min-w-0">
               <div className="inline-flex max-w-full items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-sm text-muted-foreground shadow-sm backdrop-blur-sm">