Fix anon dropdown button width (#1997)

This commit is contained in:
ekzyis 2025-03-20 10:46:07 -05:00 committed by GitHub
parent 08501583df
commit ada230597d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -223,6 +223,9 @@ export function MeDropdown ({ me, dropNavKey }) {
)
}
// this is the width of the 'switch account' button if no width is given
const SWITCH_ACCOUNT_BUTTON_WIDTH = '162px'
export function SignUpButton ({ className = 'py-0', width }) {
const router = useRouter()
const handleLogin = useCallback(async pathname => await router.push({
@ -233,7 +236,8 @@ export function SignUpButton ({ className = 'py-0', width }) {
return (
<Button
className={classNames('align-items-center ps-2 pe-3', className)}
style={{ borderWidth: '2px', width: width || '150px' }}
// 161px is the width of the 'switch account' button
style={{ borderWidth: '2px', width: width || SWITCH_ACCOUNT_BUTTON_WIDTH }}
id='signup'
onClick={() => handleLogin('/signup')}
>
@ -257,7 +261,7 @@ export default function LoginButton () {
<Button
className='align-items-center px-3 py-1'
id='login'
style={{ borderWidth: '2px', width: '150px' }}
style={{ borderWidth: '2px', width: SWITCH_ACCOUNT_BUTTON_WIDTH }}
variant='outline-grey-darkmode'
onClick={() => handleLogin('/login')}
>
@ -344,7 +348,7 @@ function SwitchAccountButton ({ handleClose }) {
<Button
className='align-items-center px-3 py-1'
variant='outline-grey-darkmode'
style={{ borderWidth: '2px', width: '150px' }}
style={{ borderWidth: '2px', width: SWITCH_ACCOUNT_BUTTON_WIDTH }}
onClick={() => {
// login buttons rendered in offcanvas aren't wrapped inside <Dropdown>
// so we manually close the offcanvas in that case by passing down handleClose here