Fixed docs whitespace for mobile / tablet

packages/website/ts/components/docs/get_started_link.tsx

@@ -36,6 +36,10 @@ const GetStartedButton = styled(Button)`
 `;
 
 const GetStartedParagraph = styled(Paragraph)`
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+
     @media (max-width: 500px) {
         font-size: 14px;
     }

packages/website/ts/components/docs/separator.tsx

@@ -1,8 +1,20 @@
 import styled from 'styled-components';
 
-export const Separator = styled.hr`
+interface ISeparatorProps {
+    margin?: string;
+}
+
+export const Separator = styled.hr<ISeparatorProps>`
     border-width: 0 0 1px;
     border-color: #e4e4e4;
     height: 0;
-    margin: 30px 0;
+    margin: ${({ margin }) => margin};
+
+    @media (max-width: 768px) {
+        margin: 30px 0;
+    }
 `;
+
+Separator.defaultProps = {
+    margin: '30px 0',
+};

packages/website/ts/components/docs/step_links.tsx

@@ -20,5 +20,4 @@ export const StepLinks: React.FC<ILinkProps> = ({ links }) => (
 const StepLinksWrapper = styled.div`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
-    margin-bottom: 1.875rem;
 `;

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

@@ -15,6 +15,8 @@ import { Heading } from 'ts/components/text';
 
 import { documentConstants } from 'ts/utils/document_meta_constants';
 
+const separatorMargin = '60px 0';
+
 export const DocsHome: React.FC = () => {
     return (
         <SiteWrap theme="light">
@@ -26,7 +28,7 @@ export const DocsHome: React.FC = () => {
                         <ShortcutLink key={`shortcut-${index}`} {...shortcut} />
                     ))}
                 </ShortcutsWrapper>
-                <Separator />
+                <Separator margin={separatorMargin} />
                 <GetStartedWrapper>
                     <div>
                         <Heading size="default">Get Started</Heading>
@@ -34,13 +36,12 @@ export const DocsHome: React.FC = () => {
                             <GetStartedLink key={`getStarted-${index}`} {...link} />
                         ))}
                     </div>
-                    <Separator />
                     <div>
                         <Heading size="default">Useful Links</Heading>
                         <StepLinks links={usefulLinks} />
                     </div>
                 </GetStartedWrapper>
-                <Separator />
+                <Separator margin={separatorMargin} />
                 <CommunityWrapper>
                     {communityShortcuts.map((shortcut, index) => (
                         <CommunityLink key={`communityLink-${index}`} {...shortcut} />
@@ -64,12 +65,11 @@ const ShortcutsWrapper = styled.div`
 
 const GetStartedWrapper = styled.div`
     display: grid;
-    grid-template-columns: 1fr 0 1fr;
+    grid-template-columns: 1fr 1fr;
     grid-column-gap: 70px;
     grid-row-gap: 30px;
 
     @media (max-width: 900px) {
-        grid-column-gap: 30px;
         grid-template-columns: 1fr;
     }
 `;