TabbedShowLayout not scrollable

[JoshCorps]

What you were expecting: When there are too many tabs to fit the current screen the tab bar should become scrollable and not continue off screen.

What happened instead: The tab bar remains the same size with no scroll and tab options off screen.

Steps to reproduce: I copied the react-admin tutorial code from here and then added the code from the scrollable example here

Related code:

I've pushed the code here

export const PostShow = props => (
    <Show {...props}>
        <TabbedShowLayout tabs={<TabbedShowLayoutTabs variant="scrollable" {...props} />} >
            <Tab label="Summary">
                <TextField source="title" />
                <TextField source="teaser" />
                <RichTextField source="body" />
                <DateField label="Publication date" source="created_at" />
            </Tab>
            <Tab label="Summary"></Tab>
            <Tab label="Summary"></Tab>
            <Tab label="Summary"></Tab>
            <Tab label="Summary"></Tab>
            <Tab label="Summary"></Tab>
            <Tab label="Summary"></Tab>
        </TabbedShowLayout>
    </Show>
);

Other information:

I've tried material-ui tab components without react-admin and they work as expected

Environment

• React-admin version: 3.9.0 (also tried in 3.12.4)
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.0
• Browser: Chrome and Firefox
• Stack trace (in case of a JS error):

[fzan]

@jcorps1 I think you cannot scroll because the window is actually scrolling the content. Did you try to set a max width to the container? and adding scroll buttons? Just dropped an example here: https://codesandbox.io/s/naughty-bogdan-4q3mv?file=/src/index.css Please note that the css tricky rule is "quick and dirty" to show what i mean :-)

[davidhenley]

@JoshCorps did you ever find a good solution for this?