From b63e254f36df781c031f64f258e4998dce4f6dde Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Tue, 3 Feb 2026 15:14:15 +0800
Subject: [PATCH] fix(frontend): fix button icon and text layout in help page

- Add inline-flex items-center to all button links for proper icon alignment
- Add flex-shrink-0 to all icons to prevent shrinking
- Change support buttons container to flex-wrap for better responsiveness
- Ensure icons and text stay on same line in all buttons
---
 ccw/frontend/src/pages/HelpPage.tsx | 36 ++++++++++++++---------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/ccw/frontend/src/pages/HelpPage.tsx b/ccw/frontend/src/pages/HelpPage.tsx
index 9b317e9c..cb39ca1e 100644
--- a/ccw/frontend/src/pages/HelpPage.tsx
+++ b/ccw/frontend/src/pages/HelpPage.tsx
@@ -104,13 +104,13 @@ export function HelpPage() {
           <Button
             variant="default"
             size="sm"
-            className="gap-2 flex-shrink-0"
+            className="flex-shrink-0"
             asChild
           >
-            <a href="/docs" target="_blank" rel="noopener noreferrer" className="whitespace-nowrap">
-              <FileText className="w-4 h-4" />
+            <a href="/docs" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 whitespace-nowrap">
+              <FileText className="w-4 h-4 flex-shrink-0" />
               {formatMessage({ id: 'help.fullDocs' })}
-              <ExternalLink className="w-3 h-3" />
+              <ExternalLink className="w-3 h-3 flex-shrink-0" />
             </a>
           </Button>
         </div>
@@ -207,9 +207,9 @@ export function HelpPage() {
             </div>
           </div>
           <Button variant="ghost" size="sm" className="w-full mt-auto" asChild>
-            <a href="/docs/commands" className="whitespace-nowrap">
+            <a href="/docs/commands" className="inline-flex items-center justify-center whitespace-nowrap">
               {formatMessage({ id: 'help.viewAll' })}
-              <ArrowRight className="w-4 h-4 ml-1" />
+              <ArrowRight className="w-4 h-4 ml-1 flex-shrink-0" />
             </a>
           </Button>
         </Card>
@@ -242,9 +242,9 @@ export function HelpPage() {
             </div>
           </div>
           <Button variant="ghost" size="sm" className="w-full mt-auto" asChild>
-            <a href="/docs/workflows" className="whitespace-nowrap">
+            <a href="/docs/workflows" className="inline-flex items-center justify-center whitespace-nowrap">
               {formatMessage({ id: 'help.viewAll' })}
-              <ArrowRight className="w-4 h-4 ml-1" />
+              <ArrowRight className="w-4 h-4 ml-1 flex-shrink-0" />
             </a>
           </Button>
         </Card>
@@ -277,9 +277,9 @@ export function HelpPage() {
             </div>
           </div>
           <Button variant="ghost" size="sm" className="w-full mt-auto" asChild>
-            <a href="/docs/overview" className="whitespace-nowrap">
+            <a href="/docs/overview" className="inline-flex items-center justify-center whitespace-nowrap">
               {formatMessage({ id: 'help.getStarted' })}
-              <ArrowRight className="w-4 h-4 ml-1" />
+              <ArrowRight className="w-4 h-4 ml-1 flex-shrink-0" />
             </a>
           </Button>
         </Card>
@@ -301,10 +301,10 @@ export function HelpPage() {
               </p>
             </div>
           </div>
-          <Button variant="default" size="sm" className="gap-2 flex-shrink-0 w-full sm:w-auto" asChild>
-            <a href="/docs" className="whitespace-nowrap">
+          <Button variant="default" size="sm" className="flex-shrink-0 w-full sm:w-auto" asChild>
+            <a href="/docs" className="inline-flex items-center justify-center gap-2 whitespace-nowrap">
               {formatMessage({ id: 'help.searchDocs.button' })}
-              <ArrowRight className="w-4 h-4" />
+              <ArrowRight className="w-4 h-4 flex-shrink-0" />
             </a>
           </Button>
         </div>
@@ -323,16 +323,16 @@ export function HelpPage() {
             <p className="text-muted-foreground text-sm mt-2">
               {formatMessage({ id: 'help.support.description' })}
             </p>
-            <div className="flex flex-col sm:flex-row gap-3 mt-4">
+            <div className="flex flex-wrap gap-3 mt-4">
               <Button variant="outline" size="sm" asChild>
-                <a href="/docs/faq" className="whitespace-nowrap">
-                  <Book className="w-4 h-4 mr-2" />
+                <a href="/docs/faq" className="inline-flex items-center whitespace-nowrap">
+                  <Book className="w-4 h-4 mr-2 flex-shrink-0" />
                   {formatMessage({ id: 'help.support.documentation' })}
                 </a>
               </Button>
               <Button variant="outline" size="sm" asChild>
-                <a href="https://github.com/catlog22/Claude-Code-Workflow/issues" target="_blank" rel="noopener noreferrer" className="whitespace-nowrap">
-                  <Video className="w-4 h-4 mr-2" />
+                <a href="https://github.com/catlog22/Claude-Code-Workflow/issues" target="_blank" rel="noopener noreferrer" className="inline-flex items-center whitespace-nowrap">
+                  <Video className="w-4 h-4 mr-2 flex-shrink-0" />
                   {formatMessage({ id: 'help.support.tutorials' })}
                 </a>
               </Button>