Add max-width Style Prop to Tabs.tsx

Summary:
- We're using the `Tabs` component from `flipper-plugin` and upon adding them, we noticed that our view being displayed within the tabs no longer scrolled and the tab internally was being stretched far off the screen. (D31538124)
- After egp did some digging, he discovered that by adding the `maxWidth` style property to the inner `Layout.Container`, the tab no longer stretched and the scrolling was restored.
- We played around by adding wrapper elements around the contents of our Tab and adding the same style prop, but this did not yield the same result.

***Would Love some input from the Flipper team as to the best way to ensure that this won't break other's plugins.  Thank you!***

Reviewed By: mweststrate

Differential Revision: D31672790

fbshipit-source-id: 99cab1873f359f4c1827e4c94f2527636884c237
This commit is contained in:
Daniel Kohli
2021-10-25 14:12:12 -07:00
committed by Facebook GitHub Bot
parent 2423423183
commit fa7e8a6b37

View File

@@ -72,7 +72,7 @@ export const Tab: React.FC<
> = function Tab({pad, gap, children, ...baseProps}) {
return (
<AntdTabs.TabPane {...baseProps}>
<Layout.Container gap={gap} pad={pad} grow>
<Layout.Container gap={gap} pad={pad} grow style={{maxWidth: '100%'}}>
{children}
</Layout.Container>
</AntdTabs.TabPane>