ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix anon dropdown button width (#1997)

Browse Source
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
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/nav/common.js
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 }) { export function SignUpButton ({ className = 'py-0', width }) {
const router = useRouter() const router = useRouter()
const handleLogin = useCallback(async pathname => await router.push({ const handleLogin = useCallback(async pathname => await router.push({
@ -233,7 +236,8 @@ export function SignUpButton ({ className = 'py-0', width }) {
return ( return (
<Button <Button
className={classNames('align-items-center ps-2 pe-3', className)} 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' id='signup'
onClick={() => handleLogin('/signup')} onClick={() => handleLogin('/signup')}
> >
@ -257,7 +261,7 @@ export default function LoginButton () {
<Button <Button
className='align-items-center px-3 py-1' className='align-items-center px-3 py-1'
id='login' id='login'
style={{ borderWidth: '2px', width: '150px' }} style={{ borderWidth: '2px', width: SWITCH_ACCOUNT_BUTTON_WIDTH }}
variant='outline-grey-darkmode' variant='outline-grey-darkmode'
onClick={() => handleLogin('/login')} onClick={() => handleLogin('/login')}
> >
@ -344,7 +348,7 @@ function SwitchAccountButton ({ handleClose }) {
<Button <Button
className='align-items-center px-3 py-1' className='align-items-center px-3 py-1'
variant='outline-grey-darkmode' variant='outline-grey-darkmode'
style={{ borderWidth: '2px', width: '150px' }} style={{ borderWidth: '2px', width: SWITCH_ACCOUNT_BUTTON_WIDTH }}
onClick={() => { onClick={() => {
// login buttons rendered in offcanvas aren't wrapped inside <Dropdown> // login buttons rendered in offcanvas aren't wrapped inside <Dropdown>
// so we manually close the offcanvas in that case by passing down handleClose here // so we manually close the offcanvas in that case by passing down handleClose here