From fa6ea586f558f13828d03793f7371085a914140b Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Thu, 17 Apr 2025 10:42:07 +0200
Subject: [PATCH 1/3] fix: double truncating on comment section

---
 .../src/components/comments/CommentAuthor.tsx |  2 +-
 .../components/comments/CommentContainer.tsx  | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/shared/src/components/comments/CommentAuthor.tsx b/packages/shared/src/components/comments/CommentAuthor.tsx
index 11a18f10a41..2ac27f8936f 100644
--- a/packages/shared/src/components/comments/CommentAuthor.tsx
+++ b/packages/shared/src/components/comments/CommentAuthor.tsx
@@ -22,7 +22,7 @@ export default function CommentAuthor({
       <ProfileLink
         href={author.permalink}
         className={classNames(
-          'commentAuthor w-fit font-bold text-text-primary typo-callout',
+          'commentAuthor w-fit flex-1 font-bold text-text-primary typo-callout',
           className,
         )}
         title={author.name}
diff --git a/packages/shared/src/components/comments/CommentContainer.tsx b/packages/shared/src/components/comments/CommentContainer.tsx
index 430c54d4465..af902098396 100644
--- a/packages/shared/src/components/comments/CommentContainer.tsx
+++ b/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 flex-1 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>
   );
 }

From edc812411962f3977c80f156f59bae0534a499e2 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Thu, 17 Apr 2025 11:07:38 +0200
Subject: [PATCH 2/3] fix: add storybook component

---
 .../comments/CommentContainer.stories.tsx     | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 packages/storybook/stories/components/comments/CommentContainer.stories.tsx

diff --git a/packages/storybook/stories/components/comments/CommentContainer.stories.tsx b/packages/storybook/stories/components/comments/CommentContainer.stories.tsx
new file mode 100644
index 00000000000..9e396075f38
--- /dev/null
+++ b/packages/storybook/stories/components/comments/CommentContainer.stories.tsx
@@ -0,0 +1,76 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import CommentContainer, { CommentContainerProps } from '@dailydotdev/shared/src/components/comments/CommentContainer';
+import { action } from '@storybook/addon-actions';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+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: [],
+    },
+    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'),
+};

From d848a492d68c25cd5cfccaade6a79c4361500787 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Thu, 17 Apr 2025 11:58:30 +0200
Subject: [PATCH 3/3] fix: visual fixes from storybook

---
 packages/shared/src/components/comments/CommentAuthor.tsx   | 2 +-
 .../shared/src/components/comments/CommentContainer.tsx     | 2 +-
 .../components/comments/CommentContainer.stories.tsx        | 6 +++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/comments/CommentAuthor.tsx b/packages/shared/src/components/comments/CommentAuthor.tsx
index 2ac27f8936f..11a18f10a41 100644
--- a/packages/shared/src/components/comments/CommentAuthor.tsx
+++ b/packages/shared/src/components/comments/CommentAuthor.tsx
@@ -22,7 +22,7 @@ export default function CommentAuthor({
       <ProfileLink
         href={author.permalink}
         className={classNames(
-          'commentAuthor w-fit flex-1 font-bold text-text-primary typo-callout',
+          'commentAuthor w-fit font-bold text-text-primary typo-callout',
           className,
         )}
         title={author.name}
diff --git a/packages/shared/src/components/comments/CommentContainer.tsx b/packages/shared/src/components/comments/CommentContainer.tsx
index af902098396..6b3630967a4 100644
--- a/packages/shared/src/components/comments/CommentContainer.tsx
+++ b/packages/shared/src/components/comments/CommentContainer.tsx
@@ -124,7 +124,7 @@ export default function CommentContainer({
             {!!comment.author?.isPlus && (
               <PlusUserBadge user={comment.author} />
             )}
-            <div className="flex min-w-0 flex-1 shrink items-center">
+            <div className="flex min-w-0 shrink items-center">
               <ProfileLink href={comment.author.permalink}>
                 <TruncateText
                   className="text-text-tertiary typo-footnote"
diff --git a/packages/storybook/stories/components/comments/CommentContainer.stories.tsx b/packages/storybook/stories/components/comments/CommentContainer.stories.tsx
index 9e396075f38..0784559ff99 100644
--- a/packages/storybook/stories/components/comments/CommentContainer.stories.tsx
+++ b/packages/storybook/stories/components/comments/CommentContainer.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import CommentContainer, { CommentContainerProps } from '@dailydotdev/shared/src/components/comments/CommentContainer';
 import { action } from '@storybook/addon-actions';
-import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
 import { SourceType } from '@dailydotdev/shared/src/graphql/sources';
 import ExtensionProviders from '../../extension/_providers';
 
@@ -52,6 +51,11 @@ Default.args = {
       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',