reticulum-ref/Ratspeak
1
0
Fork 0
mirror of https://github.com/ratspeak/Ratspeak synced 2026-08-12 18:07:35 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: stabilize text scale presets

Browse source
This commit is contained in:
DeFiDude 2026-08-03 15:16:44 -06:00
parent 860d814ae6
commit 3d3e7290bb
4 changed files with 18 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
dashboard/index.html
View file

@ -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">

2
dashboard/scripts/test_css_contract.js
View file

@ -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');

2
dashboard/scripts/test_frontend_foundations.js
View file

@ -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'));

14
dashboard/static/css/10-views.css
View file

@ -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;
}