Align Workspace Switcher with Breadcrumb by Adjusting Height (#6384)

@Bonapara 
Issue #6375 

This change makes sure the container height is 32px instead of 28px.
should the container inside it should also be 32px, please refer video
below for context


https://github.com/user-attachments/assets/fe97f0de-e1fd-4fda-a9a7-e9585469c530


Also skeleton height is 20px (refer video below), the black component in
the video is the skeleton for this particular component.
What should be skeletons height?


https://github.com/user-attachments/assets/0956c8d9-8e4e-4c20-bb71-7fb1e2cba4fd

---------

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

packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx

@@ -8,22 +8,25 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
 
 const StyledAnimatedContainer = styled(motion.div)`
+  align-items: center;
   display: flex;
   justify-content: end;
 `;
 
 const StyledItemsContainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 12px;
-  margin-bottom: auto;
-  overflow-y: auto;
   height: calc(100dvh - 32px);
-  min-width: 216px;
+  margin-bottom: auto;
-  max-width: 216px;
+  max-width: 204px;
+  min-width: 204px;
+  overflow-y: auto;
 `;
 
 const StyledSkeletonContainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: column;
   gap: 32px;
@@ -32,9 +35,13 @@ const StyledSkeletonContainer = styled.div`
 const StyledSkeletonTitleContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  justify-content: center;
-  margin-left: 12px;
+  align-items: flex-start;
-  margin-top: 8px;
+  gap: 10px;
+  height: 32px;
+
+  max-width: 196px;
+  min-width: 196px;
 `;
 
 export const LeftPanelSkeletonLoader = () => {
@@ -54,17 +61,18 @@ export const LeftPanelSkeletonLoader = () => {
       }}
     >
       <StyledItemsContainer>
+        <StyledSkeletonTitleContainer>
+          <SkeletonTheme
+            baseColor={GRAY_SCALE.gray15}
+            highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+            borderRadius={4}
+          >
+            <Skeleton width={96} height={16} />
+          </SkeletonTheme>
+        </StyledSkeletonTitleContainer>
         <StyledSkeletonContainer>
-          <StyledSkeletonTitleContainer>
-            <SkeletonTheme
-              baseColor={GRAY_SCALE.gray15}
-              highlightColor={BACKGROUND_LIGHT.transparent.lighter}
-              borderRadius={4}
-            >
-              <Skeleton width={96} height={16} />
-            </SkeletonTheme>
-          </StyledSkeletonTitleContainer>
           <MainNavigationDrawerItemsSkeletonLoader length={3} />
+          <MainNavigationDrawerItemsSkeletonLoader title length={2} />
           <MainNavigationDrawerItemsSkeletonLoader title length={3} />
         </StyledSkeletonContainer>
       </StyledItemsContainer>

packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx

@@ -1,13 +1,15 @@
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import styled from '@emotion/styled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
 
 const StyledSkeletonContainer = styled.div`
+  align-items: flex-start;
+
   display: flex;
   flex-direction: column;
   gap: 6px;
-  margin-left: 12px;
+  min-width: 196px;
-  margin-top: 8px;
+  max-width: 196px;
 `;
 
 export const MainNavigationDrawerItemsSkeletonLoader = ({

packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx

@@ -1,5 +1,5 @@
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import styled from '@emotion/styled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import {
   BACKGROUND_LIGHT,
   BORDER_COMMON,
@@ -45,8 +45,11 @@ const StyledRightPanelContainer = styled.div`
 
 const StyledRightPanelFlexContainer = styled.div`
   display: flex;
-  margin-top: 12px;
+  flex-direction: row;
-  margin-bottom: 14px;
+  justify-content: flex-end;
+  align-items: center;
+  height: 32px;
+  margin-bottom: 12px;
 `;
 
 const StyledSkeletonHeaderLoader = () => {

packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx

@@ -14,7 +14,7 @@ const StyledContainer = styled.div`
   height: 100dvh;
   min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
   width: 100%;
-  padding: 12px 8px 12px;
+  padding: 12px 8px 12px 8px;
   overflow: hidden;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {

packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts

@@ -861,6 +861,7 @@ export const mockPerformance = {
   fieldDefinition: {
     fieldMetadataId: '4e79f0b7-d100-4e89-a07b-315a710b8059',
     primaryLinkLabel: 'Company',
+    label: 'Company',
     metadata: {
       fieldName: 'company',
       placeHolder: 'Company',

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -16,7 +16,7 @@ const StyledContainer = styled.div<{ isMultiWorkspace: boolean }>`
     !isMultiWorkspace ? theme.spacing(2) : null};
   padding: ${({ theme, isMultiWorkspace }) =>
     !isMultiWorkspace ? theme.spacing(1) : null};
-  height: ${({ theme }) => theme.spacing(7)};
+  height: ${({ theme }) => theme.spacing(8)};
   user-select: none;
 `;
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts

@@ -1,3 +1,3 @@
 export const DESKTOP_NAV_DRAWER_WIDTHS = {
-  menu: 236,
+  menu: 220,
 };