catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-11 02:33:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): fix button icon and text layout in help page

Browse Source 
- 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
This commit is contained in:
catlog22
2026-02-03 15:14:15 +08:00
parent 86b1a15671
commit b63e254f36
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ccw/frontend/src/pages/HelpPage.tsx
View File

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