Browse Source

feat: auto-scroll to top when submitting interview answers

Adds smooth scroll-to-top behavior in the Interview web page when
the Submit Answer button is clicked. This improves UX by automatically
bringing the user back to the top of the page to see new questions.

Fixes #371
Alvin Real 3 months ago
parent
commit
1758424da3
2 changed files with 16 additions and 0 deletions
  1. 11 0
      src/interview/interview.test.ts
  2. 5 0
      src/interview/ui.ts

+ 11 - 0
src/interview/interview.test.ts

@@ -1610,6 +1610,17 @@ describe('renderInterviewPage', () => {
     expect(html).toContain('<svg');
     expect(html).not.toContain('https://ohmyopencodeslim.com');
   });
+
+  test('includes smooth scroll-to-top behavior in the submit handler', () => {
+    const html = renderInterviewPage('scroll-test', 'scroll-test');
+
+    expect(html).toContain('function scrollToTop()');
+    expect(html).toContain(
+      "window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });",
+    );
+    expect(html).toContain('overlayText.textContent = "Submitting Answers...";');
+    expect(html).toContain('scrollToTop();');
+  });
 });
 
 /** Discover a free port by briefly binding to port 0, then closing. */

+ 5 - 0
src/interview/ui.ts

@@ -1390,6 +1390,10 @@ export function renderInterviewPage(
         render(data);
       }
 
+      function scrollToTop() {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+      }
+
       document.getElementById('submitButton').addEventListener('click', async () => {
         if (!state.data) return;
         const answers = (state.data.questions || []).map((question) => {
@@ -1403,6 +1407,7 @@ export function renderInterviewPage(
         const overlayText = document.getElementById('loadingText');
         overlay.classList.add('active');
         overlayText.textContent = "Submitting Answers...";
+        scrollToTop();
 
         try {
           const response = await fetch('/api/interviews/' + encodeURIComponent(interviewId) + '/answers', {