[WIP] Added overflow prop to section new layout. Fixed mobile layout for docs page.

packages/website/ts/components/docs/sidebar/table_of_contents.tsx

@@ -50,7 +50,7 @@ const ContentsAside = styled.aside`
 
 const ContentsWrapper = styled.div`
     position: sticky;
-    top: 154px; /* To make space for the header when clicking on links */
+    top: 154px; /* To make space for the header (react-headroom) when clicking on links */
 `;
 
 const ContentsList = styled.ul`
@@ -75,7 +75,7 @@ const ContentLink = styled(Link)`
         transition: color 250ms ease-in-out;
     }
 
-    &.scroll-link-active span {
+    &.active span {
         color: ${colors.brandDark};
     }
 `;

packages/website/ts/components/newLayout.tsx

@@ -28,6 +28,7 @@ export interface SectionProps extends WrapProps {
     isPadded?: boolean;
     isFullWidth?: boolean;
     isFlex?: boolean;
+    overflow?: string;
     padding?: string;
     margin?: string;
     paddingMobile?: string;
@@ -106,7 +107,7 @@ const SectionBase = styled.section<SectionProps>`
     padding: ${props => props.isPadded && (props.padding || '120px 0')};
     background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
     position: relative;
-    overflow: ${props => !props.isFullWidth && 'hidden'};
+    overflow: ${props => !props.isFullWidth && (props.overflow || 'hidden')};
 
     &:hover {
         background-color: ${props => props.hasHover && opacify(0.2, props.theme[`lightBgColor`])};

packages/website/ts/pages/docs/view.tsx

@@ -74,24 +74,26 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
         <SiteWrap theme="light">
             <DocumentTitle {...documentConstants.DOCS} />
             <Hero title={title} />
-            {Component ? (
-                <Columns>
-                    <TableOfContents contents={contents} />
-                    <ContentWrapper>
-                        <MDXProvider components={mdxComponents}>
-                            {/*
+            <Section maxWidth="1130px" overflow="visible">
+                {Component ? (
+                    <Columns>
+                        <TableOfContents contents={contents} />
+                        <ContentWrapper>
+                            <MDXProvider components={mdxComponents}>
+                                {/*
                                 // @ts-ignore */}
-                            <Component />
-                        </MDXProvider>
-                        <HelpCallout />
-                        <HelpfulCta page={page} />
-                    </ContentWrapper>
-                </Columns>
-            ) : (
-                <LoaderWrapper>
-                    <CircularProgress size={40} thickness={2} color={colors.brandLight} />
-                </LoaderWrapper>
-            )}
+                                <Component />
+                            </MDXProvider>
+                            <HelpCallout />
+                            <HelpfulCta page={page} />
+                        </ContentWrapper>
+                    </Columns>
+                ) : (
+                    <LoaderWrapper>
+                        <CircularProgress size={40} thickness={2} color={colors.brandLight} />
+                    </LoaderWrapper>
+                )}
+            </Section>
         </SiteWrap>
     );
 };
@@ -116,9 +118,7 @@ const Columns = styled.div`
 `;
 
 const ContentWrapper = styled.article`
-    min-height: 300px;
-    max-width: 100vw;
-    width: 100%;
+    min-width: 0;
 `;
 
 const Separator = styled.hr`