Fix UI components (#2771)

* fixes radio button's label (issue #2566)

* fixes entity title double text input's width (issue #2562)

* fixed checkmark placement on color scheme card

* fix failing CI Docs

* fixes computed node dimensions and color scheme card

* fix color scheme card background

* fix color scheme card background

* updated color scheme card docs

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx

@@ -8,21 +8,19 @@ import {
 } from 'framer-motion';
 
 import { Checkmark } from '@/ui/display/checkmark/components/Checkmark';
-import DarkNoise from '@/ui/theme/assets/dark-noise.jpg';
-import LightNoise from '@/ui/theme/assets/light-noise.png';
 import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
 
 const StyledColorSchemeBackground = styled.div<
   Pick<ColorSchemeCardProps, 'variant'>
 >`
   align-items: flex-end;
-  background: ${({ variant }) => {
+  background: ${({ variant, theme }) => {
     switch (variant) {
       case 'Dark':
-        return `url(${DarkNoise.toString()});`;
+        return theme.grayScale.gray75;
       case 'Light':
       default:
-        return `url(${LightNoise.toString()});`;
+        return theme.grayScale.gray15;
     }
   }};
   border: ${({ variant, theme }) => {
@@ -119,15 +117,16 @@ const ColorSchemeSegment = ({
 
 const StyledContainer = styled.div`
   position: relative;
+  width: 120px;
 `;
 
 const StyledMixedColorSchemeSegment = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.md};
   cursor: pointer;
   display: flex;
-  display: flex;
   height: 80px;
   overflow: hidden;
+  position: relative;
   width: 120px;
 `;
 

front/src/modules/ui/input/components/Radio.tsx

@@ -26,7 +26,7 @@ const StyledContainer = styled.div<{ labelPosition?: LabelPosition }>`
     flex-direction: row;
   `};
   align-items: center;
-  display: flex;
+  display: inline-flex;
 `;
 
 type RadioInputProps = {

front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from 'react';
+import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
 type ComputeNodeDimensionsProps = {
@@ -27,18 +27,26 @@ export const ComputeNodeDimensions = ({
     | undefined
   >(undefined);
 
-  useEffect(() => {
-    nodeWrapperRef.current &&
-      setNodeDimensions({
-        width: nodeWrapperRef.current.offsetWidth,
-        height: nodeWrapperRef.current.offsetHeight,
-      });
-  }, [node]);
+  useLayoutEffect(() => {
+    if (!nodeWrapperRef.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      if (nodeWrapperRef.current) {
+        setNodeDimensions({
+          width: nodeWrapperRef.current.offsetWidth,
+          height: nodeWrapperRef.current.offsetHeight,
+        });
+      }
+    });
+    resizeObserver.observe(nodeWrapperRef.current);
+    return () => resizeObserver.disconnect();
+  }, [nodeWrapperRef]);
 
   return (
     <>
       <StyledNodeWrapper ref={nodeWrapperRef}>{node}</StyledNodeWrapper>
-      {children(nodeDimensions)}
+      {nodeDimensions && children(nodeDimensions)}
     </>
   );
 };