From a53fa873b124b49bc8583d7640fc2c2852d94e30 Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Tue, 4 Mar 2025 17:32:40 -0800
Subject: [PATCH] fixed images

---
 .../getting-started/components.mdx            |  8 +++++--
 .../pages-template/getting-started/setup.mdx  |  9 +++++---
 docs/fern/style.css                           | 21 ++++++++++++-------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/docs/fern/docs/pages-template/getting-started/components.mdx b/docs/fern/docs/pages-template/getting-started/components.mdx
index ade03dc82..943b93d8f 100644
--- a/docs/fern/docs/pages-template/getting-started/components.mdx
+++ b/docs/fern/docs/pages-template/getting-started/components.mdx
@@ -11,7 +11,9 @@ For the full documentation of all available components, please refer to the [com
 
 The `<UserButton />` component shows the user's avatar that opens a dropdown with various user settings on click.
 
-![UserButton](../imgs/user-button.png)
+<div className="stack-white-image-showcase">
+  <img src="../imgs/user-button.png" alt="UserButton" className="stack-200h" />
+</div>
 
 ```tsx title="page.tsx"
 import { UserButton } from '@stackframe/stack';
@@ -27,7 +29,9 @@ export default function Page() {
 
 These components show a sign-in and sign-up form, respectively.
 
-![Sign-in Component](../imgs/sign-in.png)
+<div className="stack-white-image-showcase">
+  <img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
+</div>
 
 ```tsx title="page.tsx"
 import { SignIn } from '@stackframe/stack';
diff --git a/docs/fern/docs/pages-template/getting-started/setup.mdx b/docs/fern/docs/pages-template/getting-started/setup.mdx
index c2d6f5ec9..8f15d8901 100644
--- a/docs/fern/docs/pages-template/getting-started/setup.mdx
+++ b/docs/fern/docs/pages-template/getting-started/setup.mdx
@@ -145,14 +145,15 @@ We recommend using our **setup wizard** for a seamless installation experience.
 
 That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signup](http://localhost:3000/handler/sign-up), you will see the sign-up page.
 
-![Stack sign in page](../imgs/sign-in.png)
+<div className="stack-white-image-showcase">
+  <img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
+</div>
 
 After signing up/in, you will be redirected back to the home page. We will show you how to add user information to it in the next section. You can also check out the [http://localhost:3000/handler/account-settings](http://localhost:3000/handler/account-settings) page which looks like this:
 
 ![Stack account settings page](../imgs/account-settings.png)
 
 
-
 ## Next steps
 
 Next up, we will show you how to [retrieve and update user information](./users.mdx), and how to [protect a page](../concepts/backend-integration.mdx) from unauthorized access.
@@ -236,7 +237,9 @@ Before getting started, make sure you have a [React project](https://react.dev/l
   That's it! Stack is now configured in your React project. If you start your React app and navigate to [http://localhost:5173/handler/sign-up](http://localhost:5173/handler/sign-up), you will see the sign-up page.
 
 
-  ![Stack sign in page](../imgs/sign-in.png)
+  <div className="stack-white-image-showcase">
+    <img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
+  </div>
 
   After signing up/in, you will be redirected back to the home page. We will show you how to add user information to it in the next section. You can also check out the [http://localhost:5173/handler/account-settings](http://localhost:5173/handler/account-settings) page which looks like this:
 
diff --git a/docs/fern/style.css b/docs/fern/style.css
index 51718b314..cb00c67b4 100644
--- a/docs/fern/style.css
+++ b/docs/fern/style.css
@@ -142,50 +142,57 @@ tr.stack-clickable-row-missing {
 }
 
 .stack-50h {
-  aspect-ratio: unset !important;
+  aspect-ratio: auto !important;
   height: unset !important;
   width: unset !important;
   height: 50px !important;
+  object-fit: contain !important;
 }
 
 .stack-100h {
-  aspect-ratio: unset !important;
+  aspect-ratio: auto !important;
   height: unset !important;
   width: unset !important;
   height: 100px !important;
+  object-fit: contain !important;
 }
 
 .stack-150h {
-  aspect-ratio: unset !important;
+  aspect-ratio: auto !important;
   height: unset !important;
   width: unset !important;
   height: 150px !important;
+  object-fit: contain !important;
 }
 
 .stack-200h {
-  aspect-ratio: unset !important;
+  aspect-ratio: auto !important;
   height: unset !important;
   width: unset !important;
   height: 200px !important;
+  object-fit: contain !important;
 }
 
 .stack-250h {
-  aspect-ratio: unset !important;
+  aspect-ratio: auto !important;
   height: unset !important;
   width: unset !important;
   height: 250px !important;
+  object-fit: contain !important;
 }
 
 .stack-300h {
-  aspect-ratio: unset !important;
+  aspect-ratio: auto !important;
   height: unset !important;
   width: unset !important;
   height: 300px !important;
+  object-fit: contain !important;
 }
 
 .stack-350h {
-  aspect-ratio: unset !important;
+  aspect-ratio: auto !important;
   height: unset !important;
   width: unset !important;
   height: 350px !important;
+  object-fit: contain !important;
 }