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

src/components/nav_bar_button/index.tsx

@@ -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>
   );
 };
 

src/components/nav_bar_button/index.types.ts

@@ -27,6 +27,7 @@ export type NavBarButtonProps = {
    * If true, applies the "main" variant styling.
    *
    * @default false
+   * @deprecated Automatic in NavBar — usually no need to set manually.
    */
   main?: boolean;
 

src/definition/app.ts

@@ -1,6 +1,6 @@
 import { Locale } from 'date-fns';
 import { FullnameOption } from './settings';
-import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 
 export type ColorSchemeType = 'blue' | 'green' | 'purple' | 'orange';
 
@@ -94,5 +94,5 @@ export type NavBarOptionsType = {
   title?: string;
   secondaryTitle?: string;
   quickSettings?: VoidFunction;
-  buttons?: ReactElement;
+  buttons?: ReactNode;
 };

src/layouts/navbar/index.tsx

@@ -87,6 +87,7 @@ const NavBar = ({ isSupported }: NavBarType) => {
     fullname,
     navBarOptions,
     handleQuickSettings,
+    markLastNavBarButton,
   } = useNavbar();
 
   return (
@@ -533,7 +534,7 @@ const NavBar = ({ isSupported }: NavBarType) => {
                       borderRadius: 'var(--radius-xl)',
                     }}
                   >
-                    {navBarOptions.buttons}
+                    {markLastNavBarButton(navBarOptions.buttons)}
                   </Box>
                 )}
               </>
@@ -542,7 +543,7 @@ const NavBar = ({ isSupported }: NavBarType) => {
         </Toolbar>
       </AppBar>
       {navBarOptions.buttons && !tablet688Up && (
-        <BottomMenu buttons={navBarOptions.buttons} />
+        <BottomMenu buttons={markLastNavBarButton(navBarOptions.buttons)} />
       )}
     </>
   );

src/layouts/navbar/useNavbar.tsx

@@ -22,6 +22,16 @@ import {
   fullnameState,
 } from '@states/settings';
 import { userSignOut } from '@services/firebase/auth';
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  useCallback,
+} from 'react';
+import NavBarButton from '@components/nav_bar_button';
+import { NavBarButtonProps } from '@components/nav_bar_button/index.types';
 
 const useNavbar = () => {
   const navigate = useNavigate();
@@ -109,6 +119,70 @@ const useNavbar = () => {
     globalThis.location.reload();
   };
 
+  const markLastNavBarButton = useCallback((children: ReactNode): ReactNode => {
+    const flat = Children.toArray(children);
+
+    let lastParentIndex = -1;
+    let lastChildIndex: number | null = null;
+
+    for (let i = 0; i < flat.length; i++) {
+      const child = flat[i];
+
+      if (!isValidElement(child)) continue;
+
+      if (child.type === NavBarButton) {
+        lastParentIndex = i;
+        lastChildIndex = null;
+        continue;
+      }
+
+      const nested = Children.toArray(
+        (child.props as { children?: ReactNode }).children
+      );
+      for (let j = 0; j < nested.length; j++) {
+        const nestedChild = nested[j];
+        if (isValidElement(nestedChild) && nestedChild.type === NavBarButton) {
+          lastParentIndex = i;
+          lastChildIndex = j;
+        }
+      }
+    }
+
+    if (lastParentIndex === -1) return children;
+
+    return flat.map((child, i) => {
+      if (!isValidElement(child)) return child;
+
+      if (i !== lastParentIndex) return child;
+
+      if (lastChildIndex === null && child.type === NavBarButton) {
+        return cloneElement(child as ReactElement<NavBarButtonProps>, {
+          main: true,
+        });
+      }
+
+      if (lastChildIndex !== null) {
+        const nested = Children.toArray(
+          (child.props as { children?: ReactNode }).children
+        );
+        const updatedNested = nested.map((nestedChild, j) =>
+          isValidElement(nestedChild) &&
+          nestedChild.type === NavBarButton &&
+          j === lastChildIndex
+            ? cloneElement(nestedChild as ReactElement<NavBarButtonProps>, {
+                main: true,
+              })
+            : nestedChild
+        );
+        return cloneElement(child as ReactElement<{ children?: ReactNode }>, {
+          children: updatedNested,
+        });
+      }
+
+      return child;
+    });
+  }, []);
+
   return {
     openMore,
     handleOpenMoreMenu,
@@ -136,6 +210,7 @@ const useNavbar = () => {
     desktopUp,
     handleQuickSettings,
     tablet688Up,
+    markLastNavBarButton,
   };
 };
 

src/pages/meetings/midweek/index.tsx

@@ -114,7 +114,6 @@ const MidweekMeeting = () => {
               {isConnected && (
                 <NavBarButton
                   text={t('tr_publish')}
-                  main
                   icon={<IconPublish />}
                   onClick={handleOpenPublish}
                 ></NavBarButton>

src/pages/meetings/weekend/index.tsx

@@ -83,6 +83,7 @@ const WeekendMeeting = () => {
               ></NavBarButton>
               <NavBarButton
                 text={t('tr_autofill')}
+                main={!isConnected}
                 icon={<IconGenerate />}
                 onClick={handleOpenAutofill}
               ></NavBarButton>

src/pages/persons/person_details/index.tsx

@@ -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
@@ -98,14 +105,6 @@ const PersonDetails = () => {
           <PersonEmergencyContacts />
         </Box>
       </Box>
-
-      {isPersonEditor && !laptopUp && (
-        <Box
-          sx={{ display: 'flex', flexDirection: 'column-reverse', gap: '8px' }}
-        >
-          <PersonButtonActions />
-        </Box>
-      )}
     </Box>
   );
 };