Changes Pupeteer screenshot mechanism, updates dependencies, fix docs, add fallback for screenshot, add dev script

src/pages/About.tsx

@@ -31,6 +31,7 @@ const HeaderLinkContainer = styled.nav`
 const Section = styled(StyledCard)`
   margin-bottom: 2rem;
   overflow: clip;
+  max-height: 100%;
   h3 {
     font-size: 1.5rem;
   }
@@ -76,6 +77,7 @@ const Section = styled(StyledCard)`
     max-width: 300px;
     max-height: 28rem;
     border-radius: 6px;
+    clear: both;
   }
 `;
 

src/pages/Results.tsx

@@ -431,7 +431,7 @@ const Results = (): JSX.Element => {
     { id: 'dnssec', title: 'DNSSEC', result: dnsSecResults, Component: DnsSecCard, refresh: updateDnsSecResults },
     { id: 'status', title: 'Server Status', result: serverStatusResults, Component: ServerStatusCard, refresh: updateServerStatusResults },
     { id: 'ports', title: 'Open Ports', result: portsResults, Component: OpenPortsCard, refresh: updatePortsResults },
-    { id: 'screenshot', title: 'Screenshot', result: screenshotResult, Component: ScreenshotCard, refresh: updateScreenshotResult },
+    { id: 'screenshot', title: 'Screenshot', result: screenshotResult || lighthouseResults?.fullPageScreenshot?.screenshot, Component: ScreenshotCard, refresh: updateScreenshotResult },
     // { id: 'screenshot', title: 'Screenshot', result: lighthouseResults?.fullPageScreenshot?.screenshot, Component: ScreenshotCard, refresh: updateLighthouseResults },
     { id: 'txt-records', title: 'TXT Records', result: txtRecordResults, Component: TxtRecordCard, refresh: updateTxtRecordResults },
     { id: 'hsts', title: 'HSTS Check', result: hstsResults, Component: HstsCard, refresh: updateHstsResults },

src/utils/docs.ts

@@ -276,8 +276,8 @@ const docs: Doc[] = [
   {
     id: "features",
     title: "Features",
-    description: '',
-    use: "",
+    description: 'Checks which core features are present on a site. If a feature as marked as dead, that means it\'s not being actively used at load time',
+    use: "This is useful to understand what a site is capable of, and what technologies to look for",
     resources: [],
     screenshot: 'https://i.ibb.co/gP4P6kp/wc-features.png',
   },