From 3d3e7290bba99bab810ae22666700ee82287c3e5 Mon Sep 17 00:00:00 2001
From: DeFiDude <59237470+DeFiDude@users.noreply.github.com>
Date: Mon, 3 Aug 2026 15:16:44 -0600
Subject: [PATCH] ui: stabilize text scale presets

---
 dashboard/index.html                           |  1 -
 dashboard/scripts/test_css_contract.js         |  2 ++
 dashboard/scripts/test_frontend_foundations.js |  2 ++
 dashboard/static/css/10-views.css              | 14 ++++++++++++++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/dashboard/index.html b/dashboard/index.html
index 2d16f89..2c7636e 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -1209,7 +1209,6 @@
                                     <span class="settings-row-desc" id="settings-text-scale-desc">Choose a comfortable reading size without enlarging controls or touch targets.</span>
                                 </div>
                                 <fieldset class="settings-type-presets" aria-labelledby="settings-text-scale-label" aria-describedby="settings-text-scale-desc">
-                                    <legend class="sr-only">Text size</legend>
                                     <label class="settings-type-preset" data-scale="100">
                                         <input type="radio" name="settings-text-scale" value="100" checked>
                                         <span class="settings-type-preset-card">
diff --git a/dashboard/scripts/test_css_contract.js b/dashboard/scripts/test_css_contract.js
index 1df62fe..ba026e2 100644
--- a/dashboard/scripts/test_css_contract.js
+++ b/dashboard/scripts/test_css_contract.js
@@ -103,5 +103,7 @@ assert(/\.settings-type-presets\s*\{[\s\S]*?repeat\(5,/.test(sources[11].text),
 assert(/data-scale="100"[\s\S]*?--type-preview-size:\s*18px/.test(sources[11].text) &&
     /data-scale="140"[\s\S]*?--type-preview-size:\s*34px/.test(sources[11].text),
     'text-size specimens must make the preset progression visually distinct');
+assert(/data-text-scale-tier="large"\] \.settings-text-scale-row \.settings-row-info\s*\{[^}]*flex:\s*0 0 auto/s.test(sources[11].text),
+    'the 130% tier must not stretch the text-size introduction away from its presets');
 
 console.log('CSS contract tests passed');
diff --git a/dashboard/scripts/test_frontend_foundations.js b/dashboard/scripts/test_frontend_foundations.js
index bba85be..7ec0f0f 100644
--- a/dashboard/scripts/test_frontend_foundations.js
+++ b/dashboard/scripts/test_frontend_foundations.js
@@ -102,6 +102,8 @@ assert.strictEqual((html.match(/name="settings-text-scale"/g) || []).length, 5);
 assert(html.includes('class="settings-type-presets"'));
 assert(html.includes('aria-labelledby="settings-text-scale-label"'));
 assert(html.includes('aria-describedby="settings-text-scale-desc"'));
+assert(!/<legend\b[^>]*>\s*Text size\s*<\/legend>/.test(html),
+    'the visible settings label must be the preset group\'s only text-size heading');
 assert(!html.includes('no_pinch.js'), 'browser zoom must remain available');
 assert(html.includes('lxmf-compose message-composer'));
 assert(html.includes('channel-compose message-composer'));
diff --git a/dashboard/static/css/10-views.css b/dashboard/static/css/10-views.css
index 13af013..71d7a87 100644
--- a/dashboard/static/css/10-views.css
+++ b/dashboard/static/css/10-views.css
@@ -1883,17 +1883,23 @@
 .settings-text-scale-row {
     align-items: stretch;
     flex-direction: column;
+    flex-wrap: nowrap;
     gap: var(--space-5);
 }
 .settings-text-scale-row .settings-row-info {
     max-width: none;
+    min-width: 0;
+    flex: 0 0 auto;
 }
 .settings-type-presets {
     width: min(100%, 680px);
     min-width: 0;
+    min-inline-size: 0;
     margin: 0;
     padding: 0;
     border: 0;
+    align-self: flex-start;
+    flex: 0 0 auto;
     display: grid;
     grid-template-columns: repeat(5, minmax(64px, 112px));
     gap: var(--space-4);
@@ -1968,6 +1974,14 @@ html[data-text-scale-tier="large"] .settings-row-info {
     min-width: min(100%, 250px);
     flex: 1 1 250px;
 }
+html[data-text-scale-tier="large"] .settings-text-scale-row {
+    align-items: stretch;
+    flex-wrap: nowrap;
+}
+html[data-text-scale-tier="large"] .settings-text-scale-row .settings-row-info {
+    min-width: 0;
+    flex: 0 0 auto;
+}
 html[data-text-scale-tier="large"] .settings-row-actions {
     flex: 1 1 280px;
 }