Refacto form select input (#11426)

- small fixes on form design
- refacto form select input to use the existing select component

packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx

@@ -1,5 +1,5 @@
 import { SelectSizeVariant } from '@/ui/input/components/Select';
-import { useTheme } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown, OverflowingTextWithTooltip } from 'twenty-ui/display';
@@ -13,6 +13,7 @@ const StyledControlContainer = styled.div<{
   hasIcon: boolean;
   selectSizeVariant?: SelectSizeVariant;
   textAccent: SelectControlTextAccent;
+  hasRightElement?: boolean;
 }>`
   display: grid;
   grid-template-columns: ${({ hasIcon }) =>
@@ -26,7 +27,22 @@ const StyledControlContainer = styled.div<{
   padding: 0 ${({ theme }) => theme.spacing(2)};
   background-color: ${({ theme }) => theme.background.transparent.lighter};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+
+  ${({ hasRightElement, theme }) =>
+    !hasRightElement
+      ? css`
+          border-right: auto;
+          border-bottom-right-radius: ${theme.border.radius.sm};
+          border-top-right-radius: ${theme.border.radius.sm};
+        `
+      : css`
+          border-right: none;
+          border-bottom-right-radius: none;
+          border-top-right-radius: none;
+        `}
+
   color: ${({ disabled, theme, textAccent }) =>
     disabled
       ? theme.font.color.tertiary
@@ -49,6 +65,7 @@ type SelectControlProps = {
   isDisabled?: boolean;
   selectSizeVariant?: SelectSizeVariant;
   textAccent?: SelectControlTextAccent;
+  hasRightElement?: boolean;
 };
 
 export const SelectControl = ({
@@ -56,6 +73,7 @@ export const SelectControl = ({
   isDisabled,
   selectSizeVariant,
   textAccent = 'default',
+  hasRightElement,
 }: SelectControlProps) => {
   const theme = useTheme();
 
@@ -65,6 +83,7 @@ export const SelectControl = ({
       hasIcon={isDefined(selectedOption.Icon)}
       selectSizeVariant={selectSizeVariant}
       textAccent={textAccent}
+      hasRightElement={hasRightElement}
     >
       {isDefined(selectedOption.Icon) ? (
         <selectedOption.Icon