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/companies/components/CompanyChip.tsx

@@ -15,6 +15,7 @@ const StyledContainer = styled.span`
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
   height: calc(20px - 2 * ${({ theme }) => theme.spacing(1)});
+  overflow: hidden;
 
   padding: ${({ theme }) => theme.spacing(1)};
 
@@ -31,6 +32,12 @@ const StyledContainer = styled.span`
   }
 `;
 
+const StyledName = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 function CompanyChip({ name, picture }: CompanyChipPropsType) {
   return (
     <StyledContainer data-testid="company-chip">
@@ -42,7 +49,7 @@ function CompanyChip({ name, picture }: CompanyChipPropsType) {
           size={14}
         />
       )}
-      {name}
+      <StyledName>{name}</StyledName>
     </StyledContainer>
   );
 }

front/src/modules/companies/components/__stories__/CompanyChip.stories.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import CompanyChip from '../CompanyChip';
+
+const meta: Meta<typeof CompanyChip> = {
+  title: 'Modules/Companies/CompanyChip',
+  component: CompanyChip,
+};
+
+export default meta;
+type Story = StoryObj<typeof CompanyChip>;
+
+const TestCellContainer = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.primary};
+  display: flex;
+
+  height: fit-content;
+  justify-content: space-between;
+
+  max-width: 250px;
+
+  min-width: 250px;
+
+  overflow: hidden;
+  text-wrap: nowrap;
+`;
+
+export const SmallName: Story = {
+  render: getRenderWrapperForComponent(
+    <TestCellContainer>
+      <CompanyChip
+        name="Instragram"
+        picture="https://api.faviconkit.com/instagram.com/144"
+      />
+    </TestCellContainer>,
+  ),
+};
+
+export const BigName: Story = {
+  render: getRenderWrapperForComponent(
+    <TestCellContainer>
+      <CompanyChip
+        name="Google with a real big name to overflow the cell"
+        picture="https://api.faviconkit.com/google.com/144"
+      />
+    </TestCellContainer>,
+  ),
+};