Migrate to twenty-ui utilities/screen-size (#7836)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7540](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7540).

 --- 

### Description

Move `utilities/screen-size` to the `twenty-ui` package

### Demo

The `useScreenSize` was used to render the mobile nav for example on the
landing page.

It still renders properly


![](https://assets-service.gitstart.com/4814/018fa684-c192-455d-a38b-3b212fdb3c1a.png)

###### Fixes [#7540](https://github.com/twentyhq/twenty/issues/7540)

###### Dev QA

- [x] `utilities/screen-size` should be moved to the `twenty-ui` folder

- [x] The mobile nav should still show on the landing page

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/utilities/index.ts

@@ -3,3 +3,4 @@ export * from './image/getImageAbsoluteURI';
 export * from './isDefined';
 export * from './state/utils/createState';
 export * from './types/Nullable';
+export * from './screen-size/hooks/useScreenSize';

packages/twenty-ui/src/utilities/screen-size/hooks/useScreenSize.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+export const useScreenSize = () => {
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return screenSize;
+};