Front small ui fixes (#428)

* fix: add ellipsis in all table cells

* fix: workspace click redirect to home

* fix: add company chip story and edit comment cell story

* fix: remove cursor pointer on workspace name

* fix: snoop pill height

* fix: rebase

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -13,13 +13,17 @@ type OwnProps = {
   onChange: (firstname: string, lastname: string) => void;
 };
 
-const StyledDiv = styled.div`
+const NoEditModeContainer = styled.div`
   align-items: center;
   display: flex;
   justify-content: space-between;
   width: 100%;
 `;
 
+const RightContainer = styled.div`
+  margin-left: ${(props) => props.theme.spacing(1)};
+`;
+
 export function EditablePeopleFullName({ person, onChange }: OwnProps) {
   const [firstnameValue, setFirstnameValue] = useState(person.firstname ?? '');
   const [lastnameValue, setLastnameValue] = useState(person.lastname ?? '');
@@ -55,15 +59,15 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
       secondValuePlaceholder="Last name"
       onChange={handleDoubleTextChange}
       nonEditModeContent={
-        <>
-          <StyledDiv>
-            <PersonChip name={person.firstname + ' ' + person.lastname} />
-          </StyledDiv>
-          <CellCommentChip
-            count={person._commentCount ?? 0}
-            onClick={handleCommentClick}
-          />
-        </>
+        <NoEditModeContainer>
+          <PersonChip name={person.firstname + ' ' + person.lastname} />
+          <RightContainer>
+            <CellCommentChip
+              count={person._commentCount ?? 0}
+              onClick={handleCommentClick}
+            />
+          </RightContainer>
+        </NoEditModeContainer>
       }
     />
   );

front/src/modules/people/components/PersonChip.tsx

@@ -34,6 +34,12 @@ const StyledContainer = styled.span`
   white-space: nowrap;
 `;
 
+const StyledName = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 export function PersonChip({ name, picture }: PersonChipPropsType) {
   return (
     <StyledContainer data-testid="person-chip">
@@ -42,7 +48,7 @@ export function PersonChip({ name, picture }: PersonChipPropsType) {
         src={picture ? picture.toString() : PersonPlaceholder.toString()}
         alt="person"
       />
-      {name}
+      <StyledName>{name}</StyledName>
     </StyledContainer>
   );
 }