Vertical tabs looks broken on small screens

I did manual testing for this. Not only do vertical tabs look broken on mobile devices, they actually break the styling of everything else on the page as well!

Everything that looked strange at first to me in this patch turned out to be correct and essential.

Before

After

Wow, that does indeed look much nicer. :)

+++ b/core/includes/form.inc
@@ -4067,7 +4067,7 @@ function form_pre_render_vertical_tabs($element) {
-  return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>';
+  return '<div data-vertical-tabs-panes>' . $element['#children'] . '</div>';

Huh. I had no idea that was valid HTML. Go HTML5, I guess. :)

Committed and pushed to 8.x. Thanks!

Sadly, this patch had an interesting side-effect that we all forgot to consider.

filter.admin.js called tabHide() on the vertical tab containing the filter settings for any filter that is disabled. (And tabShow() when it gets enabled.)

Because the Vertical Tabs JS is no longer run at all on mobile devices, this also *breaks* on mobile devices.

Indeed, I just realized that too. Opened a new issue to fix it, includes a patch: #2108955: Settings for disabled filters are not hidden in narrow viewports, because Vertical Tabs are disabled in narrow viewports.

Sorry for inappropriately reopening this issue.