From 323ab08f387e35d2b99df7e691d7557d236c0e8b Mon Sep 17 00:00:00 2001
From: JB <jb-apps@outlook.com>
Date: Mon, 6 Oct 2025 11:42:15 -0700
Subject: [PATCH] feat: Enhance dashboard and styles for improved layout and
 accessibility

---
 abogen/web/static/dashboard.js | 43 +++++++++++++++++++---------------
 abogen/web/static/styles.css   |  7 +++++-
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/abogen/web/static/dashboard.js b/abogen/web/static/dashboard.js
index 7881705..d36ab84 100644
--- a/abogen/web/static/dashboard.js
+++ b/abogen/web/static/dashboard.js
@@ -35,14 +35,28 @@ const initDashboard = () => {
     return true;
   };
 
+  const applySavedProfile = (option) => {
+    if (!option) return;
+    const presetFormula = option.dataset.formula || "";
+    const profileLang = option.dataset.language || "";
+    if (formulaInput) {
+      formulaInput.value = presetFormula;
+      formulaInput.readOnly = true;
+      formulaInput.dataset.state = "locked";
+    }
+    if (profileLang && languageSelect) {
+      languageSelect.value = profileLang;
+    }
+  };
+
   const updateVoiceControls = () => {
     if (!profileSelect) {
       return;
     }
-    const value = profileSelect.value;
-    const isStandard = !value || value === "__standard";
+    const value = profileSelect.value || "__standard";
+    const isStandard = value === "__standard";
     const isFormula = value === "__formula";
-    const isSavedProfile = Boolean(value && !isStandard && !isFormula);
+    const isSavedProfile = !isStandard && !isFormula;
 
     if (voiceField) {
       const showVoice = isStandard;
@@ -57,33 +71,24 @@ const initDashboard = () => {
       }
     }
 
-    let presetFormula = "";
     if (isSavedProfile) {
-      const option = profileSelect.selectedOptions[0];
-      if (option) {
-        presetFormula = option.dataset.formula || "";
-        const profileLang = option.dataset.language || "";
-        if (profileLang && languageSelect) {
-          languageSelect.value = profileLang;
-        }
-      }
+      applySavedProfile(profileSelect.selectedOptions[0] || null);
+    } else if (!isFormula && formulaInput) {
+      formulaInput.value = "";
     }
 
-    const showFormula = isFormula;
     if (formulaField) {
+      const showFormula = isFormula;
       formulaField.hidden = !showFormula;
       formulaField.setAttribute("aria-hidden", showFormula ? "false" : "true");
     }
     if (formulaInput) {
-      formulaInput.disabled = !showFormula;
-      if (showFormula) {
-        if (presetFormula && !formulaInput.value) {
-          formulaInput.value = presetFormula;
-        }
+      if (isFormula) {
+        formulaInput.disabled = false;
         formulaInput.readOnly = false;
         formulaInput.dataset.state = "editable";
       } else {
-        formulaInput.value = formulaInput.value.trim();
+        formulaInput.disabled = !isSavedProfile;
         formulaInput.readOnly = true;
         formulaInput.dataset.state = isSavedProfile ? "locked" : "editable";
       }
diff --git a/abogen/web/static/styles.css b/abogen/web/static/styles.css
index 1edcf9d..df69964 100644
--- a/abogen/web/static/styles.css
+++ b/abogen/web/static/styles.css
@@ -1035,12 +1035,15 @@ progress.progress::-moz-progress-bar {
   border-radius: 18px;
   border: 1px solid rgba(148, 163, 184, 0.18);
   background: rgba(15, 23, 42, 0.35);
+  max-width: 460px;
 }
 
 .field--slider {
   display: flex;
   flex-direction: column;
   gap: 0.65rem;
+  align-items: flex-start;
+  width: min(100%, 420px);
 }
 
 .field--slider label {
@@ -1086,10 +1089,12 @@ progress.progress::-moz-progress-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
+  justify-content: flex-start;
+  width: min(100%, 420px);
 }
 
 .voice-preview audio {
-  width: 100%;
+  width: min(100%, 420px);
   border-radius: 12px;
   background: rgba(15, 23, 42, 0.45);
   border: 1px solid rgba(148, 163, 184, 0.18);