From f6e3963b99f923adaca0eade943858454134cbeb Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Mon, 11 May 2026 20:33:27 -0500
Subject: [PATCH] fix: Guide formatting

---
 .../GuidePage/components/GuideScreenshot.tsx      | 15 ++++++++++++---
 .../GuidePage/sections/GettingStartedSection.tsx  |  2 ++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/GuidePage/components/GuideScreenshot.tsx b/frontend/src/pages/GuidePage/components/GuideScreenshot.tsx
index aa7c5cf..bec25fc 100644
--- a/frontend/src/pages/GuidePage/components/GuideScreenshot.tsx
+++ b/frontend/src/pages/GuidePage/components/GuideScreenshot.tsx
@@ -1,19 +1,28 @@
+type GuideScreenshotSize = 'wide' | 'narrow';
+
 interface GuideScreenshotProps {
   src: string;
   alt: string;
   caption?: string;
   mobile?: boolean;
+  size?: GuideScreenshotSize;
 }
 
-export const GuideScreenshot = ({ src, alt, caption, mobile }: GuideScreenshotProps) => {
+const SIZE_CLASS: Record<GuideScreenshotSize, string> = {
+  wide: 'max-w-4xl',
+  narrow: 'max-w-lg',
+};
+
+export const GuideScreenshot = ({ src, alt, caption, mobile, size = 'wide' }: GuideScreenshotProps) => {
+  const widthClass = mobile ? 'max-w-[375px]' : SIZE_CLASS[size];
   return (
-    <figure className={`my-6 ${mobile ? 'max-w-[375px]' : 'max-w-4xl'} mx-auto`}>
+    <figure className={`my-6 ${widthClass} mx-auto`}>
       <div className="rounded-lg overflow-hidden border border-white/10 shadow-lg shadow-black/20">
         <img
           src={src}
           alt={alt}
           loading="lazy"
-          className="w-full h-auto"
+          className="max-w-full h-auto"
         />
       </div>
       {caption && (
diff --git a/frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx b/frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx
index 82bfb1a..f0a53e5 100644
--- a/frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx
+++ b/frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx
@@ -35,6 +35,7 @@ export const GettingStartedSection = () => {
           src="/guide/signup-desktop.png"
           alt="Sign Up page with registration form"
           caption="The Sign Up form with email, password, and terms & conditions fields"
+          size="narrow"
         />
 
         <p className="text-titanio/70 leading-relaxed mb-4">
@@ -69,6 +70,7 @@ export const GettingStartedSection = () => {
           src="/guide/login-desktop.png"
           alt="Login page showing email and password entry"
           caption="The secure Auth0 login page"
+          size="narrow"
         />
 
         <p className="text-titanio/70 leading-relaxed mb-4">