Update Mobile Navigation bar css for better usage (#6209)

Closes #5744 
## Description
- Made Navigation Bar fixed in Mobile screens.
- Added `margin-bottom` so, last entries doesn't get hidden.

<img width="340" alt="Screenshot 2024-07-10 at 11 58 50 PM"
src="https://github.com/twentyhq/twenty/assets/91935072/a888fe06-77bf-4368-ac6d-a5d41d591bd0">
<img width="290" alt="Screenshot 2024-07-10 at 11 59 06 PM"
src="https://github.com/twentyhq/twenty/assets/91935072/c1d0c6ed-9178-4132-8b49-7ed39caf3d10">

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx

@@ -1,6 +1,6 @@
-import { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { useCallback } from 'react';
 import { Key } from 'ts-key-enum';
 
 import { Button } from '@/ui/input/button/components/Button';
@@ -13,7 +13,7 @@ const StyledDialogOverlay = styled(motion.div)`
   align-items: center;
   background: ${({ theme }) => theme.background.overlay};
   display: flex;
-  height: 100vh;
+  height: 100dvh;
   justify-content: center;
   left: 0;
   position: fixed;

packages/twenty-front/src/modules/ui/layout/page/BlankLayout.tsx

@@ -1,12 +1,12 @@
-import { Outlet } from 'react-router-dom';
 import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Outlet } from 'react-router-dom';
 
 const StyledLayout = styled.div`
   background: ${({ theme }) => theme.background.noisy};
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
   position: relative;
   scrollbar-width: 4px;
   width: 100%;

packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx

@@ -1,7 +1,7 @@
-import { Outlet } from 'react-router-dom';
 import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import { Outlet } from 'react-router-dom';
 
 import { AuthModal } from '@/auth/components/Modal';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
@@ -21,7 +21,7 @@ const StyledLayout = styled.div`
   background: ${({ theme }) => theme.background.noisy};
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
   position: relative;
   scrollbar-color: ${({ theme }) => theme.border.color.medium};
   scrollbar-width: 4px;