Implemented a much neater masonary layout

package.json

@@ -22,6 +22,7 @@
     "perf_hooks": "^0.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-masonry-css": "^1.0.16",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-simple-maps": "^2.3.0",

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;

src/pages/Results.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, ReactNode } from 'react';
 import {   useParams } from "react-router-dom";
 import styled from 'styled-components';
 import { ToastContainer } from 'react-toastify';
+import Masonry from 'react-masonry-css'
 
 import colors from 'styles/colors';
 import Heading from 'components/Form/Heading';
@@ -59,6 +60,24 @@ import {
 const ResultsOuter = styled.div`
   display: flex;
   flex-direction: column;
+  .my-masonry-grid {
+    display: -webkit-box; /* Not needed if autoprefixing */
+    display: -ms-flexbox; /* Not needed if autoprefixing */
+    display: flex;
+    // margin: 1rem;
+    // margin-left: -30px; /* gutter size offset */
+    width: auto;
+  }
+  .my-masonry-grid_column {
+    // margin-left: 30px; /* gutter size */
+    background-clip: padding-box;
+  }
+
+  /* Style your items */
+  .my-masonry-grid_column > div { /* change div to reference your elements you put in <Masonry> */
+    // background: grey;
+    // margin-bottom: 30px;
+}
 `;
 
 const ResultsContent = styled.section`
@@ -504,6 +523,11 @@ const Results = (): JSX.Element => {
       <ProgressBar loadStatus={loadingJobs} showModal={showErrorModal} showJobDocs={showInfo} />
       { address?.includes(window?.location?.hostname || 'web-check.as93.net') && <SelfScanMsg />}
       <ResultsContent>
+        
+      <Masonry
+          breakpointCols={{ 10000: 12, 4000: 9, 3600: 8, 3200: 7, 2800: 6, 2400: 5, 2000: 4, 1600: 3, 1200: 2, 800: 1 }}
+          className="my-masonry-grid"
+          columnClassName="my-masonry-grid_column">
           {
             resultCardData.map(({ id, title, result, refresh, Component }, index: number) => (
               (result && !result.error) ? (
@@ -518,6 +542,7 @@ const Results = (): JSX.Element => {
               ) : <></>
             ))
           }
+          </Masonry>
       </ResultsContent>
       <Footer />
       <Modal isOpen={modalOpen} closeModal={()=> setModalOpen(false)}>{modalContent}</Modal>

yarn.lock

@@ -8290,6 +8290,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-masonry-css@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
+  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"