feat: move Snackbar to top of screen on mobile (#5567)

... and change SnackBar blur to medium.

@Bonapara Following
https://github.com/twentyhq/twenty/pull/5515#discussion_r1609618980

Related issue: https://github.com/twentyhq/twenty/issues/5383

<img width="386" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/de2f0be4-9d9c-4013-bed2-774e0599ce49">

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx

@@ -4,6 +4,7 @@ import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useSnackBarManagerScopedStates } from '@/ui/feedback/snack-bar-manager/hooks/internal/useSnackBarManagerScopedStates';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { SnackBar } from './SnackBar';
 
@@ -16,26 +17,28 @@ const StyledSnackBarContainer = styled.div`
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
-    bottom: ${({ theme }) => theme.spacing(16)};
-    right: 50%;
-    transform: translateX(50%);
+    top: 0;
+    bottom: auto;
+    left: 0;
+    right: 0;
   }
 `;
 
-const variants = {
-  out: {
-    opacity: 0,
-    y: 40,
-  },
-  in: {
-    opacity: 1,
-    y: 0,
-  },
-};
-
 export const SnackBarProvider = ({ children }: React.PropsWithChildren) => {
   const { snackBarInternal } = useSnackBarManagerScopedStates();
   const { handleSnackBarClose } = useSnackBar();
+  const isMobile = useIsMobile();
+
+  const variants = {
+    out: {
+      opacity: 0,
+      y: isMobile ? -40 : 40,
+    },
+    in: {
+      opacity: 1,
+      y: 0,
+    },
+  };
 
   return (
     <>