mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
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> for4c5673a350. 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> [](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:
parent
e15ed03d3c
commit
4409996381
@ -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,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user