stepper ui fix (#881)

<!--

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 4c5673a350. 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](9318e2b6ce...4c5673a350)_

 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>
This commit is contained in:
BilalG1 2025-09-09 19:21:48 -07:00 committed by GitHub
parent e15ed03d3c
commit 4409996381
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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,
});
}
};