Smartgift-AI/AgentHub
14
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 88 Wiki Activity

fix(ui): keep the sidebar's EN/VI buttons at full width beside the three theme buttons

Browse Source 
The language row was a 4-column grid holding two buttons inside a flex-1 box. Once the theme row gained a third (System) button, that box narrowed and each language button fell below the width of its own label, so EN/VI sat off-centre and overflowed. One column per language, centred text.
This commit is contained in:
nntrivi2001
2026-09-24 10:28:51 +07:00
parent 8ea40260ad
commit 562f43fd88
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Sidebar.tsx
+4 -2
View File
@@ -520,7 +520,9 @@ export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
<p className="px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted"> <p className="px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
{t("nav:language")} {t("nav:language")}
</p> </p>
<div className="mt-2 grid grid-cols-4 gap-1"> {/* One column per language: a wider grid squeezed each button
below the width of its own label once Theme grew a third. */}
<div className="mt-2 grid grid-cols-2 gap-1">
{SUPPORTED_LANGUAGES.map((language) => { {SUPPORTED_LANGUAGES.map((language) => {
const active = language === currentLanguage; const active = language === currentLanguage;
return ( return (
@@ -530,7 +532,7 @@ export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
aria-pressed={active} aria-pressed={active}
aria-label={t(`nav:languageNames.${language}`)} aria-label={t(`nav:languageNames.${language}`)}
title={t(`nav:languageNames.${language}`)} title={t(`nav:languageNames.${language}`)}
className={`rounded-md px-2 py-1.5 text-[11px] font-semibold transition-colors ${ className={`rounded-md px-1 py-1.5 text-center text-[11px] font-semibold transition-colors ${
active active
? "bg-accent/20 text-accent border border-accent/30" ? "bg-accent/20 text-accent border border-accent/30"
: "bg-surface-1 text-fg-secondary border border-border hover:bg-surface-3 hover:text-fg-primary" : "bg-surface-1 text-fg-secondary border border-border hover:bg-surface-3 hover:text-fg-primary"