Implemented a much neater masonary layout

src/components/Form/Card.tsx

@@ -11,6 +11,7 @@ export const StyledCard = styled.section<{ styles?: string}>`
   border-radius: 8px;
   padding: 1rem;
   position: relative;
+  margin 0.5rem;
   ${props => props.styles}
 `;
 

src/components/Results/HostNames.tsx

@@ -28,7 +28,7 @@ const HostListSection = (props: { list: string[], title: string }) => {
 }
 
 const cardStyles = `
-  max-height: 32rem;
+  max-height: 50rem;
   overflow: auto;
 `;
 

src/components/Results/RobotsTxt.tsx

@@ -5,7 +5,7 @@ import Row, { RowProps }  from 'components/Form/Row';
 const cardStyles = `
   grid-row: span 2;
   .content {
-    max-height: 40rem;
+    max-height: 50rem;
     overflow-y: auto;
   }
 `;

src/components/Results/Screenshot.tsx

@@ -2,7 +2,7 @@ import { Card } from 'components/Form/Card';
 
 const cardStyles = `
   overflow: auto;
-  max-height: 40rem;
+  max-height: 50rem;
   grid-row: span 2;
   img {
     border-radius: 6px;

src/components/Results/SiteFeatures.tsx

@@ -5,7 +5,7 @@ import Heading  from 'components/Form/Heading';
 
 const styles = `
   .content {
-    max-height: 32rem;
+    max-height: 50rem;
     overflow-y: auto;
   }
 

src/components/Results/TraceRoute.tsx

@@ -30,9 +30,7 @@ p {
 }
 `;
 
-const cardStyles = `
-  grid-row: span 2;
-`;
+const cardStyles = ``;
 
 const TraceRouteCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
   const traceRouteResponse = props.data;