Fix noninteractive toggle (#8383)

- Use a label to make the whole card interactive
- Disallow the Toggle component to shrink; it used to on mobile devices

A focus indicator is missing for the Toggle component. We'll have to add
one.

packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx

@@ -2,21 +2,21 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
-import { Card, IconLink, Toggle } from 'twenty-ui';
+import { Card, IconLink, isDefined } from 'twenty-ui';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
-const StyledToggle = styled(Toggle)`
-  margin-left: auto;
-`;
-
 export const SettingsSecurityOptionsList = () => {
   const { enqueueSnackBar } = useSnackBar();
 
   const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
     currentWorkspaceState,
   );
+  if (!isDefined(currentWorkspace)) {
+    throw new Error(
+      'The current workspace must be defined to edit its security options.',
+    );
+  }
 
   const [updateWorkspace] = useUpdateWorkspaceMutation();
 
@@ -49,12 +49,11 @@ export const SettingsSecurityOptionsList = () => {
         Icon={IconLink}
         title="Invite by Link"
         description="Allow the invitation of new users by sharing an invite link."
-        onClick={() =>
-          handleChange(!currentWorkspace?.isPublicInviteLinkEnabled)
+        checked={currentWorkspace.isPublicInviteLinkEnabled}
+        onChange={() =>
+          handleChange(!currentWorkspace.isPublicInviteLinkEnabled)
         }
-      >
-        <StyledToggle value={currentWorkspace?.isPublicInviteLinkEnabled} />
-      </SettingsOptionCardContent>
+      />
     </Card>
   );
 };