Fix jobs page overflow issue

3 files changed, 6 insertions, 4 deletions

diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 540661ea5..f2ae68b70 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -35,6 +35,7 @@ export interface ContainerProps {
     cursor?: string;
     id?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
 }
 
 export const Container: React.StatelessComponent<ContainerProps> = props => {
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index b1a9874d2..cc4b1f04b 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -6,6 +6,7 @@ import * as DocumentTitle from 'react-document-title';
 import { Footer } from 'ts/components/footer';
 import { MetaTags } from 'ts/components/meta_tags';
 import { TopBar } from 'ts/components/top_bar/top_bar';
+import { Container } from 'ts/components/ui/container';
 import { Benefits } from 'ts/pages/jobs/benefits';
 import { Join0x } from 'ts/pages/jobs/join_0x';
 import { Mission } from 'ts/pages/jobs/mission';
@@ -42,7 +43,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
     }
     public render(): React.ReactNode {
         return (
-            <div>
+            <Container overflowX="hidden">
                 <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
                 <DocumentTitle title={DOCUMENT_TITLE} />
                 <TopBar
@@ -56,7 +57,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                 <Benefits screenWidth={this.props.screenWidth} />
                 <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
-            </div>
+            </Container>
         );
     }
     private _onJoin0xCallToActionClick(): void {
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
index daddb0dcf..ec8afbd93 100644
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ b/packages/website/ts/pages/jobs/join_0x.tsx
@@ -20,10 +20,10 @@ export const Join0x = (props: Join0xProps) => (
             className="mx-auto inline-block align-middle py4"
             style={{ lineHeight: '44px', textAlign: 'center', position: 'relative' }}
         >
-            <Container className="sm-hide xs-hide md-hide" position="absolute" left="100%" marginLeft="80px">
+            <Container className="sm-hide xs-hide" position="absolute" left="100%" marginLeft="80px">
                 <Image src="images/jobs/hero-dots-right.svg" width="400px" />
             </Container>
-            <Container className="sm-hide xs-hide md-hide" position="absolute" right="100%" marginRight="80px">
+            <Container className="sm-hide xs-hide" position="absolute" right="100%" marginRight="80px">
                 <Image src="images/jobs/hero-dots-left.svg" width="400px" />
             </Container>
             <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>