Vertical relation manager tabs on resource pages

[dieterwarson]

I'd like to propose a small addition, and I'm happy to send the PR (I have it ready against 5.x).

The problem

Relation manager tabs (and combined content + relation manager tabs) are always horizontal. Records with several relation managers, or long tab labels, get a crowded tab bar. Vertical tabs work much better there, but today you have to override getRelationManagersContentComponent(), call the parent, check that it returned a Tabs instance, and then call ->vertical() on it.

The proposal

Add a page method, like the existing hasCombinedRelationManagerTabsWithContent():

public function hasVerticalRelationManagerTabs(): bool
{
    return true;
}

The default is false, so nothing changes for existing apps. It works on Edit, View and ManageRelatedRecords pages, for both separate and combined tabs.

A related CSS fix

Relation manager tabs use contained(false), which draws the tab nav as a card. With vertical(), the nav sits in a flex row with the default align-items: stretch, so it stretches to the full height of the content next to it. You end up with a tall, mostly empty card. The fix only affects vertical tabs that aren't contained, so contained vertical tabs keep their full-height divider:

.fi-sc-tabs.fi-vertical:not(.fi-contained) > .fi-tabs {
    @apply self-start;
}

Credits to @JonathanRixhon for the css fix

Before:
After:

[danharrin]

I’d prefer not to add another page-level method for this, since the existing getRelationManagersContentComponent() override lets you configure the returned Tabs component with vertical(), as you described.

I’ve merged the CSS fix in #20986 and brought it into the 4.x, 5.x, and 6.x branches. It prevents uncontained vertical tab navigation from stretching to the height of the content, while preserving the full-height divider for contained tabs. This will be included in upcoming releases.

[dieterwarson]

Okay great, thank you!