fix: removed scrollbar, elipsified overflow text supporting tooltip (#17078)

fixes #15152 

Added CSS to ellipsify overflowing text with tooltip support, consistent
with existing dropdown implementations such as the address dropdown for
long country names.
This approach resolves the issue locally without modifying global
components, avoiding the limitations of previous attempts.

<img width="655" height="508" alt="Screenshot 2026-01-11 at 4 09 45 PM"
src="https://github.com/user-attachments/assets/3e11f6c2-3f13-4c1a-91da-59fc1a34e9dd"
/>


Before :

<img width="547" height="496" alt="Screenshot 2026-01-11 at 4 09 11 PM"
src="https://github.com/user-attachments/assets/43181d93-0603-4338-bb6e-688cffac91c9"
/>

After :

<img width="578" height="527" alt="Screenshot 2026-01-11 at 4 08 28 PM"
src="https://github.com/user-attachments/assets/0f277f3b-eeff-4866-99d9-6b31309c02af"
/>

---------

Co-authored-by: Arun kumar <arunkumar@Aruns-MacBook-Air.local>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/components/SettingsMorphRelationMultiSelect.tsx

@@ -259,7 +259,7 @@ export const SettingsMorphRelationMultiSelect = ({
                             onChange?.(newSelectedObjectMetadataIds);
                             onBlur?.();
                           }}
-                        />{' '}
+                        />
                       </SelectableListItem>
                     ))}
                   </SelectableList>

packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx

@@ -12,6 +12,8 @@ const StyledLeftContentWithCheckboxContainer = styled.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};
+  min-width: 0;
+  overflow: hidden;
 `;
 
 type MenuItemMultiSelectProps = {