From da566d24262d27b9060eef420ddc005a9be679e0 Mon Sep 17 00:00:00 2001 From: vicrodh <103399283+vicrodh@users.noreply.github.com> Date: Thu, 2 Jul 2026 10:10:59 -0600 Subject: [PATCH] fix(ui): let settings buttons grow with translated labels The six local SecondaryButton/ManageButton copies in the settings panels and the two inline AudioSettings buttons had fixed widths sized for English; Spanish/French/German labels overflowed the borders. Width is now Math.max(label preferred-width + padding, old floor), so short labels keep the 160/170/200px right-edge grid and long translations grow leftward instead of overflowing. cc --- crates/qbz-ui/ui/settings/AppearanceSettings.slint | 5 +++-- crates/qbz-ui/ui/settings/AudioSettings.slint | 10 ++++++---- .../qbz-ui/ui/settings/ContentFilteringSettings.slint | 5 +++-- crates/qbz-ui/ui/settings/DeveloperSettings.slint | 5 +++-- crates/qbz-ui/ui/settings/IntegrationsSettings.slint | 5 +++-- crates/qbz-ui/ui/settings/LocalLibrarySettings.slint | 5 +++-- crates/qbz-ui/ui/settings/OfflineSettings.slint | 5 +++-- 7 files changed, 24 insertions(+), 16 deletions(-) diff --git a/crates/qbz-ui/ui/settings/AppearanceSettings.slint b/crates/qbz-ui/ui/settings/AppearanceSettings.slint index 2de44dde3..bb9fb0161 100644 --- a/crates/qbz-ui/ui/settings/AppearanceSettings.slint +++ b/crates/qbz-ui/ui/settings/AppearanceSettings.slint @@ -39,7 +39,8 @@ component SecondaryButton inherits Rectangle { in property enabled: true; callback clicked(); - width: 160px; + // 160px floor keeps the settings right-edge grid; longer translations grow. + width: Math.max(label-txt.preferred-width + 32px, 160px); height: 34px; border-radius: Radius.sm; border-width: 1px; @@ -47,7 +48,7 @@ component SecondaryButton inherits Rectangle { background: ta.has-hover && root.enabled ? Theme.surface-hover : Theme.surface-elevated; opacity: root.enabled ? 1.0 : 0.4; - Text { + label-txt := Text { text: root.label; color: Theme.text-secondary; font-size: Typography.body; diff --git a/crates/qbz-ui/ui/settings/AudioSettings.slint b/crates/qbz-ui/ui/settings/AudioSettings.slint index 0bdabcc50..f108c9186 100644 --- a/crates/qbz-ui/ui/settings/AudioSettings.slint +++ b/crates/qbz-ui/ui/settings/AudioSettings.slint @@ -255,13 +255,14 @@ export component AudioSettings inherits VerticalLayout { label: @tr("HiFi Wizard"); description: @tr("Auto-detect your DACs and set up bit-perfect playback, step by step."); wizard-btn := Rectangle { - width: 160px; + // 160px floor keeps the settings right-edge grid; longer translations grow. + width: Math.max(wizard-content.preferred-width + 32px, 160px); height: 34px; border-radius: Radius.sm; border-width: 1px; border-color: Theme.border-subtle; background: wizard-ta.has-hover ? Theme.surface-hover : Theme.surface-elevated; - HorizontalLayout { + wizard-content := HorizontalLayout { alignment: center; spacing: 8px; VerticalLayout { @@ -328,13 +329,14 @@ export component AudioSettings inherits VerticalLayout { HorizontalLayout { alignment: start; reset-btn := Rectangle { - width: 200px; + // 200px floor; longer translations grow instead of overflowing. + width: Math.max(reset-label.preferred-width + 32px, 200px); height: 36px; border-radius: Radius.sm; border-width: 1px; border-color: Theme.border-subtle; background: reset-ta.has-hover ? Theme.surface-hover : Theme.surface-elevated; - Text { + reset-label := Text { text: @tr("Reset to defaults"); color: Theme.text-secondary; font-size: Typography.body; diff --git a/crates/qbz-ui/ui/settings/ContentFilteringSettings.slint b/crates/qbz-ui/ui/settings/ContentFilteringSettings.slint index fc2721379..df1453f66 100644 --- a/crates/qbz-ui/ui/settings/ContentFilteringSettings.slint +++ b/crates/qbz-ui/ui/settings/ContentFilteringSettings.slint @@ -25,13 +25,14 @@ import { QbzIcon } from "../primitives/QbzIcon.slint"; // panels' SecondaryButton, but with a trailing chevron (Tauri's Manage link). component ManageButton inherits Rectangle { callback clicked(); - width: 160px; + // 160px floor keeps the settings right-edge grid; longer translations grow. + width: Math.max(content-l.preferred-width + 32px, 160px); height: 34px; border-radius: Radius.sm; border-width: 1px; border-color: Theme.border-subtle; background: ta.has-hover ? Theme.surface-hover : Theme.surface-elevated; - HorizontalLayout { + content-l := HorizontalLayout { alignment: center; spacing: 6px; VerticalLayout { diff --git a/crates/qbz-ui/ui/settings/DeveloperSettings.slint b/crates/qbz-ui/ui/settings/DeveloperSettings.slint index 1892433e0..df6732875 100644 --- a/crates/qbz-ui/ui/settings/DeveloperSettings.slint +++ b/crates/qbz-ui/ui/settings/DeveloperSettings.slint @@ -20,13 +20,14 @@ component GroupHeader inherits Text { component SecondaryButton inherits Rectangle { in property label; callback clicked(); - width: 160px; + // 160px floor keeps the settings right-edge grid; longer translations grow. + width: Math.max(label-txt.preferred-width + 32px, 160px); height: 34px; border-radius: Radius.sm; border-width: 1px; border-color: Theme.border-subtle; background: ta.has-hover ? Theme.surface-hover : Theme.surface-elevated; - Text { + label-txt := Text { width: 100%; height: 100%; text: root.label; diff --git a/crates/qbz-ui/ui/settings/IntegrationsSettings.slint b/crates/qbz-ui/ui/settings/IntegrationsSettings.slint index 787f520c3..a39bbf8fa 100644 --- a/crates/qbz-ui/ui/settings/IntegrationsSettings.slint +++ b/crates/qbz-ui/ui/settings/IntegrationsSettings.slint @@ -30,7 +30,8 @@ component SecondaryButton inherits Rectangle { in property enabled: true; callback clicked(); - width: 160px; + // 160px floor keeps the settings right-edge grid; longer translations grow. + width: Math.max(label-txt.preferred-width + 32px, 160px); height: 34px; border-radius: Radius.sm; border-width: 1px; @@ -38,7 +39,7 @@ component SecondaryButton inherits Rectangle { background: ta.has-hover && root.enabled ? Theme.surface-hover : Theme.surface-elevated; opacity: root.enabled ? 1.0 : 0.4; - Text { + label-txt := Text { width: 100%; height: 100%; text: root.label; diff --git a/crates/qbz-ui/ui/settings/LocalLibrarySettings.slint b/crates/qbz-ui/ui/settings/LocalLibrarySettings.slint index 8f863c113..d999a639a 100644 --- a/crates/qbz-ui/ui/settings/LocalLibrarySettings.slint +++ b/crates/qbz-ui/ui/settings/LocalLibrarySettings.slint @@ -30,14 +30,15 @@ component SecondaryButton inherits Rectangle { in property danger: false; in property enabled: true; callback clicked(); - width: 170px; + // 170px floor keeps the settings right-edge grid; longer translations grow. + width: Math.max(label-txt.preferred-width + 32px, 170px); height: 34px; border-radius: Radius.sm; border-width: 1px; border-color: root.danger ? #e0564f : Theme.border-subtle; background: ta.has-hover && root.enabled ? Theme.surface-hover : Theme.surface-elevated; opacity: root.enabled ? 1.0 : 0.5; - Text { + label-txt := Text { width: 100%; height: 100%; text: root.label; diff --git a/crates/qbz-ui/ui/settings/OfflineSettings.slint b/crates/qbz-ui/ui/settings/OfflineSettings.slint index a7310a387..2aedbdfbf 100644 --- a/crates/qbz-ui/ui/settings/OfflineSettings.slint +++ b/crates/qbz-ui/ui/settings/OfflineSettings.slint @@ -41,14 +41,15 @@ component SecondaryButton inherits Rectangle { in property danger: false; in property enabled: true; callback clicked(); - width: 160px; + // 160px floor keeps the settings right-edge grid; longer translations grow. + width: Math.max(label-txt.preferred-width + 32px, 160px); height: 34px; border-radius: Radius.sm; border-width: 1px; border-color: root.danger ? #e0564f : Theme.border-subtle; background: ta.has-hover && root.enabled ? Theme.surface-hover : Theme.surface-elevated; opacity: root.enabled ? 1.0 : 0.4; - Text { + label-txt := Text { width: 100%; height: 100%; text: root.label;