Recenter on showMorphology toggle

Author: alex-rawlings-yyc

src/__tests__/components/ContinuousView.test.tsx

@@ -1125,6 +1125,21 @@ describe('ContinuousView scroll behavior', () => {
     );
     expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
   });
+
+  it('re-centers once when showMorphology toggles', () => {
+    // Morpheme rows beneath tokens can widen phrase boxes, shifting the strip layout, so the
+    // focused group must be snapped back to center when the toggle flips.
+    const book = makeBook();
+    const props = requiredProps(book, { focusedTokenRef: 'tok-0' });
+    const { rerender } = render(<ContinuousView {...props} />, withAnalysisStore);
+    scrollIntoViewMock.mockClear();
+
+    rerender(<ContinuousView {...props} showMorphology />);
+    expect(scrollIntoViewMock).toHaveBeenCalledWith(
+      expect.objectContaining({ behavior: 'auto', inline: 'center' }),
+    );
+    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+  });
 });
 
 // ---------------------------------------------------------------------------

src/components/ContinuousView.tsx

@@ -583,17 +583,18 @@ export default function ContinuousView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [committedActiveSegmentId]);
 
-  // Re-center the focused group when a view option toggles. Toggling `simplifyPhrases` changes
-  // the strip's layout, so the previously-centered group may drift off-center; snap it back into
-  // view. `hideInactiveLinkButtons` is excluded: inactive link slots now reserve their space even
-  // when hidden (`opacity: 0`; clickability is guarded at the button level), so toggling it does
-  // not shift the layout.
+  // Re-center the focused group when a view option toggles. Toggling `simplifyPhrases` or
+  // `showMorphology` changes the strip's layout (morpheme rows can widen phrase boxes), so the
+  // previously-centered group may drift off-center; snap it back into view.
+  // `hideInactiveLinkButtons` is excluded: inactive link slots now reserve their space even when
+  // hidden (`opacity: 0`; clickability is guarded at the button level), so toggling it does not
+  // shift the layout.
   useEffect(() => {
     centerGroup(focusPhraseIndex, 'auto');
     // focusPhraseIndex is intentionally excluded: it has its own scroll effect above. This effect
     // only re-centers in response to layout-affecting option toggles. centerGroup is stable.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [simplifyPhrases]);
+  }, [simplifyPhrases, showMorphology]);
 
   // When entering edit or confirm-unlink mode, smooth-scroll to the first group of the active
   // phrase by notifying the parent of the new focused token. Scroll then follows automatically