From 4409996381aa3e165bf1cbf83f86041c0ea633c7 Mon Sep 17 00:00:00 2001
From: BilalG1 <bg2002@gmail.com>
Date: Tue, 9 Sep 2025 19:21:48 -0700
Subject: [PATCH] stepper ui fix (#881)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Fix dimension calculation in `Stepper` component by using
`offsetWidth` and `offsetHeight`.
>
>   - **UI Fix**:
> - In `Stepper` component, replace `getBoundingClientRect()` with
`offsetWidth` and `offsetHeight` for dimension calculation in
`useEffect`.
>     - Affects how dimensions are set in `setDimensions()` function.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 4c5673a35014f1ecc9829b0304b03225a2418a00. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

<!-- RECURSEML_SUMMARY:START -->
## Review by RecurseML

_🔍 Review performed on
[9318e2b..4c5673a](https://github.com/stack-auth/stack-auth/compare/9318e2b6ce47bbca5bc524cf8fd75e7ea0d7ee28...4c5673a35014f1ecc9829b0304b03225a2418a00)_

✨ No bugs found, your code is sparkling clean

<details>
<summary>✅ Files analyzed, no issues (1)</summary>

  • `apps/dashboard/src/components/stepper.tsx`
</details>

[![Need help? Join our
Discord](https://img.shields.io/badge/Need%20help%3F%20Join%20our%20Discord-5865F2?style=plastic&logo=discord&logoColor=white)](https://discord.gg/n3SsVDAW6U)
<!-- RECURSEML_SUMMARY:END -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- Bug Fixes
- Improved Stepper sizing to accurately reflect element layout, reducing
misalignment, clipping, and overflow in various layouts and themes.
- Increased stability during window/container resizes, minimizing visual
jitter and reflow glitches.

- Performance
- More efficient measurement path for Stepper dimensions, reducing
unnecessary calculations while preserving responsive updates.

- Style
- Subtle visual consistency improvements from more precise width/height
handling, leading to cleaner alignment and spacing across steps.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
---
 apps/dashboard/src/components/stepper.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/stepper.tsx b/apps/dashboard/src/components/stepper.tsx
index 25c213fe3..2c214172c 100644
--- a/apps/dashboard/src/components/stepper.tsx
+++ b/apps/dashboard/src/components/stepper.tsx
@@ -51,10 +51,9 @@ export function Stepper({ children, currentStep, onStepChange, className }: Step
   useEffect(() => {
     const updateDimensions = () => {
       if (contentRef.current) {
-        const rect = contentRef.current.getBoundingClientRect();
         setDimensions({
-          width: rect.width,
-          height: rect.height,
+          width: contentRef.current.offsetWidth,
+          height: contentRef.current.offsetHeight,
         });
       }
     };