fix(trackers): fix bottom margin for speed dial button

src/components/DefaultPageLayout/DefaultPageLayout.tsx

@@ -1,3 +1,4 @@
+import { Box, BoxProps } from '@mui/material';
 import { motion } from 'framer-motion';
 import { FC } from 'react';
 
@@ -18,15 +19,16 @@ const pageAnimation = {
   }
 };
 
-interface AnimatedPageProps {
+interface DefaultPageLayoutProps {
   children: React.ReactNode;
 }
-const AnimatedPage: FC<AnimatedPageProps> = ({ children }) => {
+const DefaultPageLayout: FC<DefaultPageLayoutProps & BoxProps> = (props) => {
+  const { children, ...boxProps } = props;
   return (
     <motion.div initial="initial" animate="animate" exit="exit" variants={pageAnimation}>
-      {children}
+      <Box {...boxProps}>{children}</Box>
     </motion.div>
   );
 };
 
-export default AnimatedPage;
+export default DefaultPageLayout;

src/pages/Trackers/Trackers.tsx

@@ -72,7 +72,8 @@ function Trackers() {
 
   return (
     <>
-      <DefaultPageLayout>
+      {/* Add a little margin to avoid the speed dial button to overlap the last tracker card */}
+      <DefaultPageLayout sx={{ mb: 10 }}>
         <DateSelector date={selectedDate} setDate={handleSetDate} />
 
         {doneTrackers.length + hiddenTrackers.length + todoTrackers.length === 0 && (
@@ -120,9 +121,9 @@ function Trackers() {
         )}
       </DefaultPageLayout>
       <SpeedDial
-        direction="down"
+        direction="up"
         ariaLabel="SuiVie SpeedDial menu"
-        sx={{ position: 'fixed', top: 16 + 64, right: 16 }}
+        sx={{ position: 'fixed', bottom: 16, right: 16 }}
         icon={<SpeedDialIcon icon={<MoreVertIcon />} openIcon={<CloseIcon />} />}>
         {actions.map((action) => (
           <SpeedDialAction