feature: align checkbox and cellLink

front/src/layout/containers/HorizontalyAlignedContainer.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: JSX.Element[];
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+function HorizontalyAlignedContainer({ children: children }: OwnProps) {
+  return <StyledContainer>{children}</StyledContainer>;
+}
+
+export default HorizontalyAlignedContainer;

front/src/pages/people/People.tsx

@@ -17,6 +17,7 @@ import ColumnHead from '../../components/table/ColumnHead';
 import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
 import Checkbox from '../../components/form/Checkbox';
+import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
 
 type Person = {
   fullName: string;
@@ -106,7 +107,7 @@ const columns = [
   columnHelper.accessor('fullName', {
     header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
     cell: (props) => (
-      <>
+      <HorizontalyAlignedContainer>
         <Checkbox
           id={`person-selected-${props.row.original.email}`}
           name={`person-selected${props.row.original.email}`}
@@ -116,7 +117,7 @@ const columns = [
           picture={props.row.original.picture}
           href="#"
         />
-      </>
+      </HorizontalyAlignedContainer>
     ),
   }),
   columnHelper.accessor('email', {