[RounakKumarAgarwal]

Problem

The "Sign in with Google" button on /auth was rendered shrunk to the size of its text instead of matching the form's width.

Fix

Google's renderButton ignores '100%' and only accepts a pixel width between 200 and 400px. The button setup now lives in a shared hook, useGoogleButton, which measures the form's width and passes it in pixels:

export const googleButtonWidth = (containerWidth: number) =>
  Math.round(Math.min(400, Math.max(200, containerWidth)));

- width: '100%',
+ width: googleButtonWidth(container.clientWidth),

• Used by both the Sign In and Sign Up forms, replacing two duplicated useEffect blocks
• Redraws the button when the form's width changes, e.g. on window resize or phone rotation (debounced by 100ms, and skipped if the width hasn't changed)
• If the Google script loads after the form, the hook waits for it, checking every 100ms, and stops with a console warning after 10s
• Google is initialized once per mount and cleaned up on unmount
• The button container is centred
• renderButton's type is changed to width?: number, so a percentage can't be passed again

Testing

• 9 tests covering: the pixel width, the 400px maximum, the 200px minimum, redraw after resize, no redraw at the same width, a late-loading script, the 10s timeout, the credential reaching googleLogin, and cleanup
• Full suite: 211/211 passing, and npm run build succeeds
• Checked locally in Light, Dark and High Contrast themes: the button matches the email button's width, including after resizing the window from desktop to mobile width

Screenshots

Before (live):

After:

Screen.Recording.2026-10-22.211258.mp4

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Ri1tik]

Also attach a proof of your test pass of all the test present.

[amantebriwal4321]

Read through the diff, the clamp to 200..400 makes sense since GIS ignores percentages. One thing: googleButtonWidth runs only when the button first renders, so if the form width changes later (resize, rotating a phone) the button keeps the old size. Might be worth re-rendering it from a ResizeObserver on the container. Small nit, clientWidth is already an integer so the Math.round can go.

[RounakKumarAgarwal]

@Ri1tik I've added the test passing screenshot in pr description , please check it out