fix(reader): restore font-controls closing brace and fix desktop popup and settings panel styling

app/static/js/app.js

@@ -2571,6 +2571,7 @@ document.addEventListener('DOMContentLoaded', () => {
     async function openWordPopup(term, contextSentence, targetElement) {
         const cleanTerm = (term || '').replace(/^['"“«`\s\-_.,;:!?()[\]{}]+|['"”»`\s\-_.,;:!?()[\]{}]+$/g, '').trim();
         if (!cleanTerm) return;
+        if (readerSettingsPanel) readerSettingsPanel.classList.add('hidden');
 
         const lowerClean = cleanTerm.toLowerCase();
         const existingCard = allCards && allCards.find(c => c.term && c.term.trim().toLowerCase() === lowerClean);
@@ -2925,6 +2926,29 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    function positionSettingsPanel() {
+        if (!readerSettingsPanel || !readerSettingsBtn) return;
+        if (window.innerWidth <= 768) {
+            readerSettingsPanel.style.top = '';
+            readerSettingsPanel.style.left = '';
+            readerSettingsPanel.style.right = '';
+            return;
+        }
+        const rect = readerSettingsBtn.getBoundingClientRect();
+        const panelWidth = 320;
+        const viewportWidth = window.innerWidth;
+
+        let left = rect.right - panelWidth;
+        if (left < 16) left = 16;
+        if (left + panelWidth > viewportWidth - 16) {
+            left = viewportWidth - panelWidth - 16;
+        }
+
+        readerSettingsPanel.style.top = `${Math.round(rect.bottom + 8)}px`;
+        readerSettingsPanel.style.left = `${Math.round(left)}px`;
+        readerSettingsPanel.style.right = 'auto';
+    }
+
     function initReaderSettingsPanel() {
         loadSavedReaderSettings();
         applyReaderSettings();
@@ -2932,10 +2956,14 @@ document.addEventListener('DOMContentLoaded', () => {
         if (readerSettingsBtn) {
             readerSettingsBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
+                if (readerWordPopup) readerWordPopup.classList.add('hidden');
                 if (readerSettingsPanel) {
                     const isHidden = readerSettingsPanel.classList.contains('hidden');
                     readerSettingsPanel.classList.toggle('hidden', !isHidden);
-                    if (isHidden) updateReaderSettingsUI();
+                    if (isHidden) {
+                        updateReaderSettingsUI();
+                        positionSettingsPanel();
+                    }
                 }
             });
         }
@@ -3028,6 +3056,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
             }
         });
+
+        window.addEventListener('resize', () => {
+            if (readerSettingsPanel && !readerSettingsPanel.classList.contains('hidden')) {
+                positionSettingsPanel();
+            }
+        }, { passive: true });
     }
 
     initReaderSettingsPanel();