dashboards fast follows: tabs border changed to outline and legends factorization (#16049)

closes
https://discord.com/channels/1130383047699738754/1440633019042889828
https://discord.com/channels/1130383047699738754/1442819106880356363

packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx

@@ -203,6 +203,10 @@ export const PageLayoutTabList = ({
   const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
     PageLayoutComponentInstanceContext,
   );
+  const tabSettingsOpenTabId = useRecoilComponentValue(
+    pageLayoutTabSettingsOpenTabIdComponentState,
+    pageLayoutId,
+  );
   const setTabSettingsOpenTabId = useSetRecoilComponentState(
     pageLayoutTabSettingsOpenTabIdComponentState,
     pageLayoutId,
@@ -220,15 +224,26 @@ export const PageLayoutTabList = ({
     [setTabSettingsOpenTabId, navigatePageLayoutCommandMenu],
   );
 
+  const isTabSettingsOpen = isDefined(tabSettingsOpenTabId);
+
   const handleSelectTab = useCallback(
     (tabId: string) => {
       if (isPageLayoutInEditMode && activeTabId === tabId) {
         openTabSettings(tabId);
         return;
       }
+      if (isPageLayoutInEditMode && isTabSettingsOpen) {
+        openTabSettings(tabId);
+      }
       selectTab(tabId);
     },
-    [isPageLayoutInEditMode, activeTabId, openTabSettings, selectTab],
+    [
+      isPageLayoutInEditMode,
+      activeTabId,
+      isTabSettingsOpen,
+      openTabSettings,
+      selectTab,
+    ],
   );
 
   const handleSelectTabFromDropdown = useCallback(
@@ -238,11 +253,15 @@ export const PageLayoutTabList = ({
         closeOverflowDropdown();
         return;
       }
+      if (isPageLayoutInEditMode && isTabSettingsOpen) {
+        openTabSettings(tabId);
+      }
       selectTabFromDropdown(tabId);
     },
     [
       isPageLayoutInEditMode,
       activeTabId,
+      isTabSettingsOpen,
       openTabSettings,
       closeOverflowDropdown,
       selectTabFromDropdown,

packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx

@@ -3,7 +3,6 @@ import { Draggable } from '@hello-pangea/dnd';
 import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { StyledTabContainer, TabContent } from 'twenty-ui/input';
 
@@ -16,12 +15,9 @@ type PageLayoutTabListReorderableTabProps = {
 };
 
 const StyledTabContent = styled(TabContent)<{ isBeingEdited: boolean }>`
-  ${({ isBeingEdited, theme }) =>
-    isBeingEdited &&
-    css`
-      border: 1px solid ${theme.color.blue};
-      border-radius: ${theme.border.radius.sm};
-    `}
+  outline: ${({ isBeingEdited, theme }) =>
+    isBeingEdited ? `1px solid ${theme.color.blue}` : 'none'};
+  outline-offset: -1px;
 `;
 
 export const PageLayoutTabListReorderableTab = ({