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

@@ -39,7 +39,8 @@ component SecondaryButton inherits Rectangle {
     in property <bool> 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;

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;

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 {

crates/qbz-ui/ui/settings/DeveloperSettings.slint

@@ -20,13 +20,14 @@ component GroupHeader inherits Text {
 component SecondaryButton inherits Rectangle {
     in property <string> 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;

crates/qbz-ui/ui/settings/IntegrationsSettings.slint

@@ -30,7 +30,8 @@ component SecondaryButton inherits Rectangle {
     in property <bool> 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;

crates/qbz-ui/ui/settings/LocalLibrarySettings.slint

@@ -30,14 +30,15 @@ component SecondaryButton inherits Rectangle {
     in property <bool> danger: false;
     in property <bool> 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;

crates/qbz-ui/ui/settings/OfflineSettings.slint

@@ -41,14 +41,15 @@ component SecondaryButton inherits Rectangle {
     in property <bool> danger: false;
     in property <bool> 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;