better label for toggle input that will improve UX (#8982)

Answering the ticket : Increase the clickable area of toggles to parent
container

# Change in Labels

In order to solve this ticket, we change the way we handle the labels VS
the inputs. The use of `htmlFor` and setting up the appropriate id for
the toggle solves the "blank click"
<img width="239" alt="Screenshot 2024-12-09 at 17 43 53"
src="https://github.com/user-attachments/assets/19eab5fc-8393-496d-b713-57e51c620bf1">

fix #8953

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx

@@ -12,7 +12,7 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-const StyledLabel = styled.label`
+const StyledText = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -25,9 +25,10 @@ const StyledIconContainer = styled.div`
   left: ${({ theme }) => theme.spacing(-3)};
 `;
 
-const StyledToggleContainer = styled.div`
-  display: flex;
+const StyledToggleContainer = styled.label`
   align-items: center;
+  cursor: pointer;
+  display: flex;
   justify-content: space-between;
   width: 100%;
 `;
@@ -59,8 +60,8 @@ export const AdvancedSettingsToggle = ({
           fill={MAIN_COLORS.yellow}
         />
       </StyledIconContainer>
-      <StyledToggleContainer>
-        <StyledLabel htmlFor={inputId}>Advanced:</StyledLabel>
+      <StyledToggleContainer htmlFor={inputId}>
+        <StyledText>Advanced:</StyledText>
 
         <Toggle
           id={inputId}