Skip to content

fix(styles): resolve bottom navbar button positioning and layout jump issues #5019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FussuChalice wants to merge 10 commits into
base: main
Choose a base branch
from
Open

fix(styles): resolve bottom navbar button positioning and layout jump issues #5019

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
14c1a0a
tweak(person_details): move Save button to bottom menu
FussuChalice Feb 17, 2026
5c84ae4
tweak(components): fix jumping when action is processing in nav_bar_b…
FussuChalice Feb 17, 2026
b552e21
tweak(persons/person_details): fix sonarqube warning
FussuChalice Feb 17, 2026
7f946b3
tweak(nav_bar_button): add keyboard controll for icon buttons in bott…
FussuChalice Feb 17, 2026
984cef8
tweak(styles): set autofill button as main, when app is not connected
FussuChalice Feb 24, 2026
4c4ce26
Merge branch 'main' into fix-new-ui-page-buttons
FussuChalice Feb 24, 2026
fb888f3
feat(navbar): auto set right button as main
FussuChalice Feb 25, 2026
9ea4b80
Merge branch 'main' into fix-new-ui-page-buttons
FussuChalice Feb 25, 2026
6c6b2b2
docs(navbar-button): clarify main prop auto behavior
FussuChalice Feb 27, 2026
08c7b70
Merge branch 'main' into fix-new-ui-page-buttons
FussuChalice Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 37 additions & 30 deletions src/components/nav_bar_button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,38 +45,45 @@ const NavBarButton = (props: NavBarButtonProps) => {
</Box>
</Button>
) : (
!disabled && (
<Box
role="button"
aria-label={props.text}
sx={{
padding: '10px',
<Box
role="button"
aria-label={props.text}
aria-disabled={disabled}
tabIndex={disabled ? -1 : 0}
onKeyDown={(e) => {
if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
props.onClick?.();
}
}}
sx={{
padding: '10px',
borderRadius: 'var(--radius-l)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
'&:hover': {
backgroundColor: 'var(--accent-200)',
},
'.MuiTouchRipple-ripple .MuiTouchRipple-child': {
borderRadius: 'var(--radius-l)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
'&:hover': {
backgroundColor: 'var(--accent-200)',
},
'.MuiTouchRipple-ripple .MuiTouchRipple-child': {
borderRadius: 'var(--radius-l)',
backgroundColor: 'var(--accent-200)',
},
'&:focus-visible': {
outline: `${iconColor} auto 1px`,
},
'& .MuiSvgIcon-root': {
fill: iconColor,
'& g, & g path': {
fill: `${iconColor} !important`,
},
backgroundColor: 'var(--accent-200)',
},
'&:focus-visible': {
outline: `${iconColor} auto 1px`,
},
'& .MuiSvgIcon-root': {
fill: iconColor,
'& g, & g path': {
fill: `${iconColor} !important`,
},
}}
onClick={props.onClick}
>
{props.icon}
</Box>
)
},
cursor: disabled ? 'default' : 'pointer',
}}
onClick={!disabled ? props.onClick : null}
>
{props.icon}
</Box>
);
};

Expand Down
8 changes: 7 additions & 1 deletion src/features/persons/export_persons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,13 @@ const ExportPersons = () => {
<NavBarButton
text={t('tr_export')}
onClick={handleExport}
icon={isProcessing ? <IconLoading /> : <IconExport />}
icon={
isProcessing ? (
<IconLoading color="var(--accent-main)" />
) : (
<IconExport />
)
}
disabled={isProcessing}
></NavBarButton>
);
Expand Down
23 changes: 11 additions & 12 deletions src/pages/persons/person_details/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,24 @@ import FamilyMembers from '@features/persons/family_members';
const PersonDetails = () => {
const { t } = useAppTranslation();

const { desktopUp, laptopUp } = useBreakpoints();
const { desktopUp, tablet688Up } = useBreakpoints();

const { isPersonEditor, isAdmin } = useCurrentUser();
const { isAdmin } = useCurrentUser();

const { isNewPerson, isBaptized, male, isConnected } = usePersonDetails();

return (
<Box sx={{ display: 'flex', gap: '16px', flexDirection: 'column' }}>
<Box
sx={{
display: 'flex',
gap: '16px',
flexDirection: 'column',
paddingBottom: !tablet688Up ? '60px' : '0px',
}}
>
<PageTitle
title={isNewPerson ? t('tr_addNewPerson') : t('tr_editPerson')}
buttons={laptopUp ? <PersonButtonActions /> : null}
buttons={<PersonButtonActions />}
/>

<Box
Expand Down Expand Up @@ -98,14 +105,6 @@ const PersonDetails = () => {
<PersonEmergencyContacts />
</Box>
</Box>

{isPersonEditor && !laptopUp && (
<Box
sx={{ display: 'flex', flexDirection: 'column-reverse', gap: '8px' }}
>
<PersonButtonActions />
</Box>
)}
</Box>
);
};
Expand Down
Loading