feat: Update voice field visibility and enhance CSS for improved layout and accessibility

abogen/web/static/dashboard.js

@@ -58,10 +58,11 @@ const initDashboard = () => {
     const isFormula = value === "__formula";
     const isSavedProfile = !isStandard && !isFormula;
 
+    const showVoiceField = isStandard;
     if (voiceField) {
-      const showVoice = isStandard;
-      voiceField.hidden = !showVoice;
-      voiceField.setAttribute("aria-hidden", showVoice ? "false" : "true");
+      voiceField.hidden = !showVoiceField;
+      voiceField.setAttribute("aria-hidden", showVoiceField ? "false" : "true");
+      voiceField.dataset.state = showVoiceField ? "visible" : "hidden";
     }
     if (voiceSelect) {
       voiceSelect.disabled = !isStandard;
@@ -77,20 +78,27 @@ const initDashboard = () => {
       formulaInput.value = "";
     }
 
+    const showFormulaField = isFormula;
     if (formulaField) {
-      const showFormula = isFormula;
-      formulaField.hidden = !showFormula;
-      formulaField.setAttribute("aria-hidden", showFormula ? "false" : "true");
+      const shouldShow = showFormulaField;
+      formulaField.hidden = !shouldShow;
+      formulaField.setAttribute("aria-hidden", shouldShow ? "false" : "true");
+      formulaField.dataset.state = shouldShow ? "visible" : "hidden";
     }
     if (formulaInput) {
       if (isFormula) {
         formulaInput.disabled = false;
         formulaInput.readOnly = false;
         formulaInput.dataset.state = "editable";
-      } else {
-        formulaInput.disabled = !isSavedProfile;
+      } else if (isSavedProfile) {
+        formulaInput.disabled = false;
         formulaInput.readOnly = true;
-        formulaInput.dataset.state = isSavedProfile ? "locked" : "editable";
+        formulaInput.dataset.state = "locked";
+      } else {
+        formulaInput.disabled = true;
+        formulaInput.readOnly = true;
+        formulaInput.value = "";
+        formulaInput.dataset.state = "editable";
       }
     }
   };

abogen/web/static/styles.css

@@ -183,6 +183,11 @@ body {
   gap: 0.4rem;
 }
 
+.field[hidden],
+.field[data-state="hidden"] {
+  display: none !important;
+}
+
 .field--full {
   max-width: none;
 }
@@ -224,6 +229,14 @@ body {
   width: min(100%, 420px);
 }
 
+.field input[type="range"] {
+  max-width: 420px;
+  width: min(100%, 420px);
+  padding: 0;
+  margin-inline: 0;
+  align-self: flex-start;
+}
+
 .field input[type="number"] {
   max-width: 200px;
 }