fix: double truncating on comment section (#4437)

Author: rebelchris

packages/shared/src/components/comments/CommentContainer.tsx

@@ -21,8 +21,8 @@ import { VerifiedCompanyUserBadge } from '../VerifiedCompanyUserBadge';
 import { Separator } from '../cards/common/common';
 import { PlusUserBadge } from '../PlusUserBadge';
 import { ProfileImageSize } from '../ProfilePicture';
-import { Image } from '../image/Image';
 import { useHasAccessToCores } from '../../hooks/useCoresFeature';
+import { Image } from '../image/Image';
 
 interface ClassName extends CommentClassName {
   content?: string;
@@ -124,7 +124,7 @@ export default function CommentContainer({
             {!!comment.author?.isPlus && (
               <PlusUserBadge user={comment.author} />
             )}
-            <div className="flex items-center">
+            <div className="flex min-w-0 shrink items-center">
               <ProfileLink href={comment.author.permalink}>
                 <TruncateText
                   className="text-text-tertiary typo-footnote"
@@ -133,6 +133,8 @@ export default function CommentContainer({
                   @{comment.author.username}
                 </TruncateText>
               </ProfileLink>
+            </div>
+            <div>
               <Separator className="!mx-0.5" />
               <CommentPublishDate comment={comment} />
             </div>
@@ -149,6 +151,15 @@ export default function CommentContainer({
             {comment.author.id === postScoutId && <UserBadge>Scout</UserBadge>}
           </FlexRow>
         </div>
+        {hasAccessToCores && !!comment.award && (
+          <div className="ml-2 flex size-7 items-center justify-center rounded-10 bg-surface-float">
+            <Image
+              src={comment.award.image}
+              alt={comment.award.name}
+              className="size-5 object-contain"
+            />
+          </div>
+        )}
       </header>
       <div
         className={classNames(
@@ -163,15 +174,6 @@ export default function CommentContainer({
         />
         {actions}
       </div>
-      {hasAccessToCores && !!comment.award && (
-        <div className="absolute right-3 top-3 flex size-7 items-center justify-center rounded-10 bg-surface-float">
-          <Image
-            src={comment.award.image}
-            alt={comment.award.name}
-            className="size-8 object-contain"
-          />
-        </div>
-      )}
     </article>
   );
 }

packages/storybook/stories/components/comments/CommentContainer.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import CommentContainer, { CommentContainerProps } from '@dailydotdev/shared/src/components/comments/CommentContainer';
+import { action } from '@storybook/addon-actions';
+import { SourceType } from '@dailydotdev/shared/src/graphql/sources';
+import ExtensionProviders from '../../extension/_providers';
+
+const meta: Meta<typeof CommentContainer> = {
+  title: 'Components/Comments/CommentContainer',
+  component: CommentContainer,
+  argTypes: {
+    className: { control: 'object' },
+    children: { control: 'text' },
+    linkToComment: { control: 'boolean' },
+    showContextHeader: { control: 'boolean' },
+    actions: { control: 'text' },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<CommentContainerProps> = (args) => (
+  <ExtensionProviders>
+    <CommentContainer {...args} />
+  </ExtensionProviders>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    post: {
+    source: {
+      id: 'source-1',
+      name: 'Example Source',
+      permalink: '/source/example',
+      type: SourceType.Squad,
+      active: true,
+      public: true,
+      membersCount: 100,
+      description: 'An example squad',
+      createdAt: new Date(),
+    },
+    title: 'Example Post Title',
+  },
+  comment: {
+    id: '1',
+    author: {
+      id: 'author-1',
+      username: 'exampleUser',
+      name: 'Example User',
+      image: '/path/to/image.jpg',
+      permalink: '/user/exampleUser',
+      isPlus: true,
+      companies: [],
+      coresRole: 3
+    },
+    award: {
+      image: 'https://placehold.it/300x300',
+      name: 'award name'
+    },
+    contentHtml: '<p>This is an example comment</p>',
+    permalink: '/comment/1',
+    parent: undefined,
+    userState: { awarded: false, vote: 0 },
+    createdAt: new Date().toISOString(),
+    numUpvotes: 10,
+    numAwards: 2,
+    post: {
+    title: 'Example Post Title',
+  },
+  },
+  commentHash: 'hash-1',
+  postAuthorId: 'author-1',
+  postScoutId: 'scout-1',
+  className: { container: 'example-class' },
+  children: 'This is a child element',
+  linkToComment: true,
+  showContextHeader: true,
+  actions: <button>Action</button>,
+  onClick: action('Comment clicked'),
+};