feature: wrap all elements in a cell

front/src/layout/containers/HorizontalyAlignedContainer.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  children: JSX.Element[];
+  children: JSX.Element[] | JSX.Element;
 };
 
 const StyledContainer = styled.div`

front/src/pages/people/People.tsx

@@ -123,9 +123,11 @@ const columns = [
   columnHelper.accessor('email', {
     header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
     cell: (props) => (
-      <a href={`mailto:${props.row.original.email}`}>
-        {props.row.original.email}
-      </a>
+      <ClickableCell href="#">
+        <a href={`mailto:${props.row.original.email}`}>
+          {props.row.original.email}
+        </a>
+      </ClickableCell>
     ),
   }),
   columnHelper.accessor('company', {
@@ -142,41 +144,44 @@ const columns = [
   columnHelper.accessor('phone', {
     header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
     cell: (props) => (
-      <a
-        href={parsePhoneNumber(
-          props.row.original.phone,
-          props.row.original.countryCode as CountryCode,
-        )?.getURI()}
-      >
-        {parsePhoneNumber(
-          props.row.original.phone,
-          props.row.original.countryCode as CountryCode,
-        )?.formatInternational() || props.row.original.phone}
-      </a>
+      <ClickableCell href="#">
+        <a
+          href={parsePhoneNumber(
+            props.row.original.phone,
+            props.row.original.countryCode as CountryCode,
+          )?.getURI()}
+        >
+          {parsePhoneNumber(
+            props.row.original.phone,
+            props.row.original.countryCode as CountryCode,
+          )?.formatInternational() || props.row.original.phone}
+        </a>
+      </ClickableCell>
     ),
   }),
   columnHelper.accessor('creationDate', {
     header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
-    cell: (props) =>
-      new Intl.DateTimeFormat(undefined, {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-      }).format(props.row.original.creationDate),
+    cell: (props) => (
+      <ClickableCell href="#">
+        {new Intl.DateTimeFormat(undefined, {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+        }).format(props.row.original.creationDate)}
+      </ClickableCell>
+    ),
   }),
   columnHelper.accessor('pipe', {
     header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
     cell: (props) => (
-      <ClickableCell href="#">
-        <CompanyChip
-          name={props.row.original.pipe.name}
-          picture={props.row.original.pipe.icon}
-        />
-      </ClickableCell>
+      <ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
     ),
   }),
   columnHelper.accessor('city', {
     header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
+    cell: (props) => (
+      <ClickableCell href="#">{props.row.original.city}</ClickableCell>
+    ),
   }),
 ];