From 95de56d81bb2fa202f0b6fc08a37ce27d658fab6 Mon Sep 17 00:00:00 2001
From: Daniel <danitex@danvics.com>
Date: Thu, 14 May 2026 17:30:08 +0200
Subject: [PATCH] Improve quiz note and navigation layout

---
 frontend/src/components/MyNote.jsx | 14 ++++++++++++++
 frontend/src/pages/QuizPage.jsx    |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/MyNote.jsx b/frontend/src/components/MyNote.jsx
index b827ed1..db86471 100644
--- a/frontend/src/components/MyNote.jsx
+++ b/frontend/src/components/MyNote.jsx
@@ -30,6 +30,7 @@ export default function MyNote({ variant = 'tab' }) {
   const loadedRef = useRef(false)
   const dragRef = useRef(null)
   const draggedRef = useRef(false)
+  const textareaRef = useRef(null)
 
   const loadNote = async () => {
     if (loadedRef.current) return
@@ -107,6 +108,18 @@ export default function MyNote({ variant = 'tab' }) {
     return () => clearTimeout(saveRef.current)
   }, [content])
 
+  useEffect(() => {
+    if (!open || loading) return
+    requestAnimationFrame(() => {
+      const textarea = textareaRef.current
+      if (!textarea) return
+      const end = textarea.value.length
+      textarea.focus()
+      textarea.setSelectionRange(end, end)
+      textarea.scrollTop = textarea.scrollHeight
+    })
+  }, [open, loading])
+
   const openNote = () => {
     setOpen(true)
     loadNote()
@@ -184,6 +197,7 @@ export default function MyNote({ variant = 'tab' }) {
       </div>
       {error && <div className="mynote-error">{error}</div>}
       <textarea
+        ref={textareaRef}
         value={content}
         onChange={e => setContent(e.target.value)}
         placeholder={loading ? 'Loading MyNote...' : 'Capture one running note across all quizzes...'}
diff --git a/frontend/src/pages/QuizPage.jsx b/frontend/src/pages/QuizPage.jsx
index 857a1c0..794c2a4 100644
--- a/frontend/src/pages/QuizPage.jsx
+++ b/frontend/src/pages/QuizPage.jsx
@@ -974,12 +974,12 @@ const timerStarted = timeLeft !== null
         <div className="fill" style={{ width: `${((currentIdx + 1) / totalCount) * 100}%` }} />
       </div>
 
-      {quizNavigation('top')}
-
       {/* Two-column layout: content + desktop sidebar */}
       <div className="quiz-layout">
         {/* Main content */}
         <div style={{ flex: 1, minWidth: 0 }}>
+          {quizNavigation('top')}
+
           {current && (
             <div className="question-card" style={{
               boxShadow: activeReadForCurrent ? '0 0 0 3px rgba(59, 130, 246, 0.22)' : undefined,