From 1348fb917a4b613bc06914e584f15c129a0fa0fe Mon Sep 17 00:00:00 2001
From: Ian Rohde <ian.rohde@gmail.com>
Date: Wed, 28 Jun 2023 10:56:26 -0700
Subject: [PATCH 1/2] add html image dimensions for lighthouse

---
 frontend/templates/troubleshooting/Problem.tsx | 7 ++++---
 frontend/templates/troubleshooting/index.tsx   | 9 ++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/templates/troubleshooting/Problem.tsx b/frontend/templates/troubleshooting/Problem.tsx
index 51e51013..485b7250 100644
--- a/frontend/templates/troubleshooting/Problem.tsx
+++ b/frontend/templates/troubleshooting/Problem.tsx
@@ -25,13 +25,14 @@ export default function ProblemCard({ problem }: { problem: Problem }) {
             >
                <Image
                   boxSize="48px"
+                  htmlWidth={48}
+                  htmlHeight={48}
                   objectFit="cover"
                   src={imageUrl}
                   alt=""
+                  outline="1px solid"
+                  outlineColor="gray.300"
                   borderRadius="4px"
-                  borderColor="gray.300"
-                  borderWidth="1px"
-                  borderStyle="solid"
                />
                <Stack
                   justify="center"
diff --git a/frontend/templates/troubleshooting/index.tsx b/frontend/templates/troubleshooting/index.tsx
index c5632709..421456e5 100644
--- a/frontend/templates/troubleshooting/index.tsx
+++ b/frontend/templates/troubleshooting/index.tsx
@@ -105,13 +105,12 @@ const Wiki: NextPageWithLayout<{
                   onClick={onOpen}
                   cursor="pointer"
                   alt={title}
-                  maxWidth="120px"
-                  minWidth="120px"
-                  minHeight="90.5px"
+                  htmlWidth={120}
+                  htmlHeight={90}
                   objectFit="contain"
                   borderRadius="4px"
-                  border="1px solid"
-                  borderColor="gray.300"
+                  outline="1px solid"
+                  outlineColor="gray.300"
                   marginRight="12px"
                   display={{ base: 'none', sm: 'block' }}
                />

From f96b134fcd135f00762935791be54ca70bcf0e70 Mon Sep 17 00:00:00 2001
From: Ian Rohde <ian.rohde@gmail.com>
Date: Wed, 28 Jun 2023 11:13:14 -0700
Subject: [PATCH 2/2] add lazyloading to Problem images

- low-hanging prop addition to fix another lighthouse issue
---
 frontend/templates/troubleshooting/Problem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/templates/troubleshooting/Problem.tsx b/frontend/templates/troubleshooting/Problem.tsx
index 485b7250..2a6c7106 100644
--- a/frontend/templates/troubleshooting/Problem.tsx
+++ b/frontend/templates/troubleshooting/Problem.tsx
@@ -33,6 +33,7 @@ export default function ProblemCard({ problem }: { problem: Problem }) {
                   outline="1px solid"
                   outlineColor="gray.300"
                   borderRadius="4px"
+                  loading="lazy"
                />
                <Stack
                   justify="center"