fix: fix some views dropdown design issues (#1648)

* fix: fix some views dropdown design issues

Closes #1610, Closes #1601

* Handle max-width on view picker

---------

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

front/src/modules/ui/button/components/FloatingIconButton.tsx

@@ -72,7 +72,8 @@ const StyledButton = styled.button<
   justify-content: center;
   padding: 0;
   position: relative;
-  transition: background 0.1s ease;
+  transition: background ${({ theme }) => theme.animation.duration.instant}s
+    ease;
   white-space: nowrap;
 
   ${({ position, size }) => {

front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx

@@ -11,6 +11,7 @@ import {
 
 const StyledFloatingIconButtonGroupContainer = styled.div`
   backdrop-filter: blur(20px);
+  background-color: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ theme }) =>
     `0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`};

front/src/modules/ui/menu-item/components/MenuItem.tsx

@@ -26,11 +26,17 @@ export type MenuItemProps = {
 
 const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)`
   & .hoverable-buttons {
-    display: none;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    right: ${({ theme }) => theme.spacing(2)};
+    transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
   }
+
   &:hover {
     & .hoverable-buttons {
-      display: block;
+      opacity: 1;
+      pointer-events: auto;
     }
   }
 `;

front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx

@@ -56,7 +56,7 @@ const StyledViewIcon = styled(IconList)`
 
 const StyledViewName = styled.span`
   display: inline-block;
-  max-width: 200px;
+  max-width: 130px;
   @media (max-width: 375px) {
     max-width: 90px;
   }
@@ -172,7 +172,7 @@ export const ViewsDropdownButton = ({
         </StyledDropdownButtonContainer>
       }
       dropdownComponents={
-        <StyledDropdownMenu>
+        <StyledDropdownMenu width={200}>
           <StyledDropdownMenuItemsContainer>
             {views.map((view) => (
               <MenuItem