Merge pull request #306 from moderntribe/feature/MOOSE-333-vertical-tabs-scroll-to-top

MOOSE-333: Scroll vertical tabs into view on mobile after selection

Author: LayaTaal

CHANGELOG.md

@@ -6,6 +6,7 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
 ## [2026.01]
 
+- Fixed: Vertical Tabs block now scrolls the selected tab into view on mobile, respecting reduced motion preferences. [MOOSE-333](https://moderntribe.atlassian.net/browse/MOOSE-333)
 - Fixed: Removed top margin from spacer block
 - Added: Yoast Duplicate Post plugin v4.5 for easier content duplication in the editor.
 - Updated: Login logo styling

wp-content/themes/core/assets/js/utils/tabs.js

@@ -194,6 +194,17 @@ const switchTabs = ( targetTabButton ) => {
 			tabButton
 		);
 	} );
+
+	// On mobile, scroll the selected tab into view so the user doesn't have to scroll back up
+	if ( config.isMobile && config.contentMergesOnMobile ) {
+		const prefersReducedMotion = window.matchMedia(
+			'(prefers-reduced-motion: reduce)'
+		).matches;
+		targetTabButton.scrollIntoView( {
+			behavior: prefersReducedMotion ? 'auto' : 'smooth',
+			block: 'start',
+		} );
+	}
 };
 
 /**

wp-content/themes/core/blocks/tribe/vertical-tabs/style.pcss

@@ -41,6 +41,11 @@
 	border-left: 3px solid var(--vertical-tabs-border-color);
 	transition: var(--transition);
 
+	/* Account for sticky header when scrolling tab into view on mobile */
+	@media (--mq-wp-small-max) {
+		scroll-margin-top: calc(var(--masthead-mobile-height) + var(--spacer-20));
+	}
+
 	&[aria-selected="true"],
   	&.editor-is-selected {
 		pointer-events: none;