Fix the settings tabs, and space a form from what follows it
**The Audio tab rendered nothing.** The tabs are radios plus sibling selectors, and the CSS named every tab twice -- once to highlight its label, once to show its panel. A tab added without also adding those two rules gets a label that selects nothing, which is not something anyone catches in review; it looks like a blank page. Replaced with rules that derive what they can. The active label is `input:checked + .tabs__tab`, which needs to know nothing at all. The panel is matched by position -- CSS cannot compare a radio's id with a panel's data-tab -- so the Nth radio shows the Nth panel. Both lists render in the same order and a conditional tab drops out of both at once, so they cannot drift. There is a test asserting the two orders match, including with Audio absent. **A card following a form sat flush against Save.** The "Try it" panel on the search page read as another field of the settings form. The gap belongs to the form rather than to its action row: the action row is always its form's last child, so a bottom margin there has nothing to push away from. Adds `.form-actions` and a bottom margin on a form that is a direct child of an admin page. Also says plainly in the dictation settings that a server hosting one model ignores the model field, so `whisper-1` there is a label rather than a selection. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -61,8 +61,9 @@
|
||||
<input class="input" id="stt-model" name="stt_model"
|
||||
value="{{ values.stt_model }}" placeholder="whisper-1">
|
||||
<p class="field__hint">
|
||||
Sent even to servers that only host one; a router in front of several
|
||||
needs it.
|
||||
A server hosting one model <strong>ignores this</strong> and uses
|
||||
whatever it was started with — <code>whisper-1</code> is then just a
|
||||
label. It only selects anything on a server that hosts several.
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -179,6 +180,6 @@
|
||||
<div id="audio-test-tts"></div>
|
||||
</section>
|
||||
|
||||
<div class="btn-row"><button class="btn btn--primary" type="submit">Save settings</button></div>
|
||||
<div class="form-actions"><button class="btn btn--primary" type="submit">Save settings</button></div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
@@ -84,6 +84,6 @@
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="btn-row"><button class="btn btn--primary" type="submit">Save settings</button></div>
|
||||
<div class="form-actions"><button class="btn btn--primary" type="submit">Save settings</button></div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="btn-row"><button class="btn btn--primary" type="submit">Save settings</button></div>
|
||||
<div class="form-actions"><button class="btn btn--primary" type="submit">Save settings</button></div>
|
||||
</form>
|
||||
|
||||
<section class="card">
|
||||
|
||||
Reference in New Issue
Block a user