diff --git a/packages/shared/src/components/buttons/CardAction.tsx b/packages/shared/src/components/buttons/CardAction.tsx
index f5e64df8b7d..732b8410ddc 100644
--- a/packages/shared/src/components/buttons/CardAction.tsx
+++ b/packages/shared/src/components/buttons/CardAction.tsx
@@ -14,18 +14,22 @@ import { ButtonSize, ButtonVariant, ButtonIconPosition } from './common';
 import type { ColorName } from '../../styles/colors';
 import InteractionCounter from '../InteractionCounter';
 
-export type CardActionDensity = 'comfortable' | 'compact';
+export type CardActionDensity = 'comfortable' | 'compact' | 'tight';
 
 const densityToSize: Record<CardActionDensity, ButtonSize> = {
   comfortable: ButtonSize.Medium,
   compact: ButtonSize.Small,
+  tight: ButtonSize.XSmall,
 };
 
 // Larger than buttonSizeToIconSizeV2: engagement-bar icons sit closer
 // to a 60% ratio (Material 3, Instagram, Reddit) so they read at a glance.
-const densityToIconSize: Record<CardActionDensity, IconSize> = {
+// `tight` is the feed-card tier, sized so six actions with counters fit the
+// 272px min card width without shrinking.
+export const densityToIconSize: Record<CardActionDensity, IconSize> = {
   comfortable: IconSize.Small,
   compact: IconSize.XSmall,
+  tight: IconSize.Size16,
 };
 
 type IconElement = React.ReactElement<IconProps>;
diff --git a/packages/shared/src/components/buttons/CardActionBar.tsx b/packages/shared/src/components/buttons/CardActionBar.tsx
index 6b0a9233a43..c753b65a4bb 100644
--- a/packages/shared/src/components/buttons/CardActionBar.tsx
+++ b/packages/shared/src/components/buttons/CardActionBar.tsx
@@ -10,7 +10,9 @@ export type CardActionBarLayout =
 
 const layoutToClass: Record<CardActionBarLayout, string> = {
   default: 'gap-1',
-  feedCard: 'flex-1 min-w-0 gap-1 justify-between',
+  // No `gap`: `justify-between` already spreads the actions, and since buttons
+  // never shrink a gap only adds width the 272px min card cannot give back.
+  feedCard: 'flex-1 min-w-0 justify-between',
   between: 'gap-1 justify-between w-full',
   compact: 'gap-0.5',
 };
diff --git a/packages/shared/src/components/cards/common/ActionButtons.spec.tsx b/packages/shared/src/components/cards/common/ActionButtons.spec.tsx
new file mode 100644
index 00000000000..96af6772532
--- /dev/null
+++ b/packages/shared/src/components/cards/common/ActionButtons.spec.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import ActionButtons from './ActionButtons';
+import type { ActionButtonsVariant } from './ActionButtons';
+import post from '../../../../__tests__/fixture/post';
+import { TestBootProvider } from '../../../../__tests__/helpers/boot';
+import { usePostImpressions } from '../../../hooks/post/usePostImpressions';
+import { useEngagementBarV2 } from '../../../hooks/useEngagementBarV2';
+import { useViewSize } from '../../../hooks/useViewSize';
+
+jest.mock('../../../hooks/post/usePostImpressions', () => ({
+  usePostImpressions: jest.fn(),
+}));
+
+// jsdom reports every media query as unmatched, so the viewport is forced:
+// the award gate must behave the same on both sides of the laptop breakpoint.
+jest.mock('../../../hooks/useViewSize', () => ({
+  ...jest.requireActual('../../../hooks/useViewSize'),
+  useViewSize: jest.fn(),
+}));
+
+jest.mock('../../../hooks/post/usePostImpressionsModal', () => ({
+  usePostImpressionsModal: () => jest.fn(),
+}));
+
+jest.mock('../../../hooks/useEngagementBarV2', () => ({
+  useEngagementBarV2: jest.fn(),
+}));
+
+jest.mock('../../post/PostAwardAction', () => ({
+  __esModule: true,
+  default: () => <div data-testid="award-action" />,
+}));
+
+const mockImpressions = (enabled: boolean) =>
+  jest.mocked(usePostImpressions).mockReturnValue({
+    enabled,
+    showImpressions: enabled,
+    impressions: enabled ? 1000 : 0,
+  });
+
+const renderComponent = (variant: ActionButtonsVariant) =>
+  render(
+    <TestBootProvider client={new QueryClient()}>
+      <ActionButtons post={post} variant={variant} />
+    </TestBootProvider>,
+  );
+
+const variants: ActionButtonsVariant[] = ['grid', 'list', 'signal'];
+
+describe.each([
+  [false, false],
+  [false, true],
+  [true, false],
+  [true, true],
+])('ActionButtons (v2: %s, laptop: %s)', (isV2, isLaptop) => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.mocked(useEngagementBarV2).mockReturnValue(isV2);
+    jest.mocked(useViewSize).mockReturnValue(isLaptop);
+  });
+
+  it.each(variants)(
+    'hides the award action on a %s card when impressions are enabled',
+    (variant) => {
+      mockImpressions(true);
+
+      renderComponent(variant);
+
+      expect(screen.queryByTestId('award-action')).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Impressions' }),
+      ).toBeInTheDocument();
+    },
+  );
+
+  it.each(variants)(
+    'keeps the award action on a %s card when impressions are disabled',
+    (variant) => {
+      mockImpressions(false);
+
+      renderComponent(variant);
+
+      expect(screen.getByTestId('award-action')).toBeInTheDocument();
+    },
+  );
+});
diff --git a/packages/shared/src/components/cards/common/ActionButtons.tsx b/packages/shared/src/components/cards/common/ActionButtons.tsx
index 84dfd0ac500..20815b49861 100644
--- a/packages/shared/src/components/cards/common/ActionButtons.tsx
+++ b/packages/shared/src/components/cards/common/ActionButtons.tsx
@@ -10,17 +10,22 @@ import {
   LinkIcon,
   DownvoteIcon,
 } from '../../icons';
-import { ButtonColor, ButtonSize, ButtonVariant } from '../../buttons/Button';
-import { useFeedPreviewMode, useViewSize, ViewSize } from '../../../hooks';
+import { ButtonColor, ButtonVariant } from '../../buttons/Button';
+import { useFeedPreviewMode } from '../../../hooks';
 import { UpvoteButtonIcon } from './UpvoteButtonIcon';
 import { BookmarkButton } from '../../buttons';
-import { IconSize } from '../../Icon';
 import { Tooltip } from '../../tooltip/Tooltip';
 import PostAwardAction from '../../post/PostAwardAction';
 import ConditionalWrapper from '../../ConditionalWrapper';
 import { PostTagsPanel } from '../../post/block/PostTagsPanel';
 import { LinkWithTooltip } from '../../tooltips/LinkWithTooltip';
 import { useCardActions } from '../../../hooks/cards/useCardActions';
+import {
+  actionCounterClassName as counterClassName,
+  actionCounterLabelClassName as counterLabelClassName,
+  FEED_ACTION_BUTTON_SIZE,
+  FEED_ACTION_ICON_SIZE,
+} from './actionCounter';
 import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
 import { usePostImpressionsModal } from '../../../hooks/post/usePostImpressionsModal';
 import { usePostImpressions } from '../../../hooks/post/usePostImpressions';
@@ -45,22 +50,24 @@ export interface ActionButtonsProps {
 
 const variantConfig = {
   grid: {
-    buttonSize: ButtonSize.Small,
-    iconSize: IconSize.XSmall,
-    containerClassName: 'px-1 pb-1',
+    buttonSize: FEED_ACTION_BUTTON_SIZE,
+    iconSize: FEED_ACTION_ICON_SIZE,
+    // Asymmetric: an icon sits on the left edge and the impressions number on
+    // the right, which needs more room to look optically centred.
+    containerClassName: 'py-1.5 pl-1 pr-2.5',
     showTagsPanel: false,
     useCommentLink: false,
   },
   list: {
-    buttonSize: ButtonSize.Small,
-    iconSize: IconSize.XSmall,
+    buttonSize: FEED_ACTION_BUTTON_SIZE,
+    iconSize: FEED_ACTION_ICON_SIZE,
     containerClassName: '',
     showTagsPanel: true,
     useCommentLink: true,
   },
   signal: {
-    buttonSize: ButtonSize.Small,
-    iconSize: IconSize.XSmall,
+    buttonSize: FEED_ACTION_BUTTON_SIZE,
+    iconSize: FEED_ACTION_ICON_SIZE,
     containerClassName: '',
     showTagsPanel: false,
     useCommentLink: true,
@@ -81,14 +88,7 @@ const ActionButtonsV1 = ({
 }: ActionButtonsProps): ReactElement | null => {
   const config = variantConfig[variant];
   const isFeedPreview = useFeedPreviewMode();
-  const isLaptop = useViewSize(ViewSize.Laptop);
   const { buttonSize, iconSize } = config;
-  // On mobile/tablet keep full-size icons but shrink the count so the icon
-  // reads as the primary affordance and the number as a subtle stat.
-  const counterClassName = classNames(
-    'tabular-nums',
-    isLaptop ? variant === 'grid' && 'typo-footnote' : 'typo-caption1',
-  );
   const { getUpvoteAnimation } = useBrandSponsorship();
 
   const {
@@ -145,7 +145,7 @@ const ActionButtonsV1 = ({
       href={post.commentsPermalink}
     >
       <QuaternaryButton
-        labelClassName="!pl-0"
+        labelClassName={counterLabelClassName}
         id={`post-${post.id}-comment-btn`}
         className="btn-tertiary-blueCheese pointer-events-auto"
         color={ButtonColor.BlueCheese}
@@ -171,7 +171,7 @@ const ActionButtonsV1 = ({
   ) : (
     <Tooltip content="Comments" side="bottom">
       <QuaternaryButton
-        labelClassName="!pl-[1px]"
+        labelClassName={counterLabelClassName}
         id={`post-${post.id}-comment-btn`}
         icon={<CommentIcon secondary={post.commented} size={iconSize} />}
         pressed={post.commented}
@@ -206,7 +206,7 @@ const ActionButtonsV1 = ({
           side={variant === 'grid' ? 'bottom' : undefined}
         >
           <QuaternaryButton
-            labelClassName={variant === 'grid' ? '!pl-[1px]' : '!pl-0'}
+            labelClassName={counterLabelClassName}
             className="btn-tertiary-avocado pointer-events-auto"
             id={`post-${post.id}-upvote-btn`}
             color={ButtonColor.Avocado}
@@ -250,11 +250,12 @@ const ActionButtonsV1 = ({
             />
           </Tooltip>
         )}
-        {/* When impressions are enabled, drop awards below laptop to make room
-            for the extra action; with the flag off, awards stay on every
-            viewport (unchanged from control). */}
-        {showAwardAction && (!impressionsEnabled || isLaptop) && (
-          <PostAwardAction post={post} iconSize={iconSize} />
+        {showAwardAction && !impressionsEnabled && (
+          <PostAwardAction
+            post={post}
+            iconSize={iconSize}
+            buttonSize={buttonSize}
+          />
         )}
         <BookmarkButton
           tooltipSide={variant === 'grid' ? 'bottom' : undefined}
@@ -293,7 +294,7 @@ const ActionButtonsV1 = ({
             side={variant === 'grid' ? 'bottom' : undefined}
           >
             <QuaternaryButton
-              labelClassName={variant === 'grid' ? '!pl-[1px]' : '!pl-0'}
+              labelClassName={counterLabelClassName}
               id={`post-${post.id}-impressions-btn`}
               size={buttonSize}
               icon={<AnalyticsIcon size={iconSize} />}
diff --git a/packages/shared/src/components/cards/common/ActionButtons.v2.tsx b/packages/shared/src/components/cards/common/ActionButtons.v2.tsx
index 38a382a8388..fd9197cbe21 100644
--- a/packages/shared/src/components/cards/common/ActionButtons.v2.tsx
+++ b/packages/shared/src/components/cards/common/ActionButtons.v2.tsx
@@ -11,7 +11,7 @@ import {
   DownvoteIcon,
 } from '../../icons';
 import { ButtonColor } from '../../buttons/ButtonV2';
-import { useFeedPreviewMode, useViewSize, ViewSize } from '../../../hooks';
+import { useFeedPreviewMode } from '../../../hooks';
 import { UpvoteButtonIcon } from './UpvoteButtonIcon';
 import { BookmarkButton } from '../../buttons/BookmarkButton.v2';
 import { Tooltip } from '../../tooltip/Tooltip';
@@ -39,11 +39,13 @@ export interface ActionButtonsProps {
   showAwardAction?: boolean;
 }
 
-const FEED_CARD_DENSITY = 'compact';
+const FEED_CARD_DENSITY = 'tight';
 
 const variantConfig = {
   grid: {
-    containerClassName: 'px-1 pb-1',
+    // Matches the v1 bar: `py-1.5` holds the row at 36px around the h-6
+    // buttons, and the wider right edge gives the trailing number room.
+    containerClassName: 'py-1.5 pl-1 pr-2.5',
     showTagsPanel: false,
     useCommentLink: false,
   },
@@ -73,9 +75,6 @@ const ActionButtons = ({
 }: ActionButtonsProps): ReactElement | null => {
   const config = variantConfig[variant];
   const isFeedPreview = useFeedPreviewMode();
-  // When impressions are enabled, awards are hidden below laptop (tablet +
-  // mobile) to make room for the extra action.
-  const isLaptop = useViewSize(ViewSize.Laptop);
   const { getUpvoteAnimation } = useBrandSponsorship();
 
   const {
@@ -207,7 +206,7 @@ const ActionButtons = ({
             />
           </Tooltip>
         )}
-        {showAwardAction && (!impressionsEnabled || isLaptop) && (
+        {showAwardAction && !impressionsEnabled && (
           <PostAwardAction post={post} density={FEED_CARD_DENSITY} />
         )}
         <BookmarkButton
diff --git a/packages/shared/src/components/cards/common/actionCounter.ts b/packages/shared/src/components/cards/common/actionCounter.ts
new file mode 100644
index 00000000000..7d8fe389915
--- /dev/null
+++ b/packages/shared/src/components/cards/common/actionCounter.ts
@@ -0,0 +1,10 @@
+import { ButtonSize } from '../../buttons/common';
+import { IconSize } from '../../Icon';
+
+// Six actions with counters have to fit the 272px min card width on their
+// intrinsic widths alone, because buttons never shrink (global flex-shrink: 0).
+export const FEED_ACTION_BUTTON_SIZE = ButtonSize.XSmall;
+export const FEED_ACTION_ICON_SIZE = IconSize.Size16;
+
+export const actionCounterClassName = 'tabular-nums typo-footnote';
+export const actionCounterLabelClassName = '!pl-0.5 pr-0.5';
diff --git a/packages/shared/src/components/post/PostAwardAction.spec.tsx b/packages/shared/src/components/post/PostAwardAction.spec.tsx
new file mode 100644
index 00000000000..66a71b17902
--- /dev/null
+++ b/packages/shared/src/components/post/PostAwardAction.spec.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import PostAwardAction from './PostAwardAction';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useCanAwardUser } from '../../hooks/useCoresFeature';
+import { useEngagementBarV2 } from '../../hooks/useEngagementBarV2';
+import type { Post } from '../../graphql/posts';
+import type { LoggedUser } from '../../lib/user';
+
+jest.mock('../../contexts/AuthContext', () => ({
+  useAuthContext: jest.fn(),
+}));
+
+jest.mock('../../hooks/useCoresFeature', () => ({
+  useCanAwardUser: jest.fn(),
+}));
+
+jest.mock('../../hooks/useEngagementBarV2', () => ({
+  useEngagementBarV2: jest.fn(),
+}));
+
+jest.mock('../../hooks/useLazyModal', () => ({
+  useLazyModal: () => ({ openModal: jest.fn() }),
+}));
+
+const post = {
+  id: 'p1',
+  numAwards: 0,
+} as Post;
+
+const mockAuth = (user: Partial<LoggedUser> | null) =>
+  jest
+    .mocked(useAuthContext)
+    .mockReturnValue({ user, showLogin: jest.fn() } as never);
+
+const renderComponent = (postProps: Partial<Post> = {}) =>
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <PostAwardAction post={{ ...post, ...postProps } as Post} />
+    </QueryClientProvider>,
+  );
+
+describe.each([false, true])('PostAwardAction (v2: %s)', (isV2) => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.mocked(useEngagementBarV2).mockReturnValue(isV2);
+    jest.mocked(useCanAwardUser).mockReturnValue(false);
+  });
+
+  it('stays hidden for a logged out user on a post without an author', () => {
+    mockAuth(null);
+
+    renderComponent();
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  // Owned by useCanAwardUser, which returns false without a sending user.
+  it('stays hidden for a logged out user on an authored post', () => {
+    mockAuth(null);
+
+    renderComponent({ author: { id: 'u2' } as Post['author'] });
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('stays hidden for a logged in user on a post without an author', () => {
+    mockAuth({ id: 'u1' });
+
+    renderComponent();
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders on the logged in user own post', () => {
+    mockAuth({ id: 'u1' });
+
+    renderComponent({ author: { id: 'u1' } as Post['author'] });
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('renders when the author can be awarded', () => {
+    mockAuth({ id: 'u1' });
+    jest.mocked(useCanAwardUser).mockReturnValue(true);
+
+    renderComponent({ author: { id: 'u2' } as Post['author'] });
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('sizes the button like the other feed actions', () => {
+    mockAuth({ id: 'u1' });
+
+    renderComponent({ author: { id: 'u1' } as Post['author'] });
+
+    expect(screen.getByRole('button')).toHaveClass('h-6');
+  });
+
+  it('keeps the awarded image at the action icon size', () => {
+    mockAuth({ id: 'u1' });
+
+    renderComponent({
+      author: { id: 'u1' } as Post['author'],
+      userState: { awarded: true } as Post['userState'],
+      featuredAward: {
+        award: { image: 'https://media.daily.dev/award.png', name: 'Award' },
+      } as Post['featuredAward'],
+    });
+
+    expect(screen.getByAltText('Award')).toHaveClass('size-4');
+  });
+});
diff --git a/packages/shared/src/components/post/PostAwardAction.tsx b/packages/shared/src/components/post/PostAwardAction.tsx
index 34d876fb367..365d6f6ffb8 100644
--- a/packages/shared/src/components/post/PostAwardAction.tsx
+++ b/packages/shared/src/components/post/PostAwardAction.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import classNames from 'classnames';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { useCanAwardUser } from '../../hooks/useCoresFeature';
 import { useLazyModal } from '../../hooks/useLazyModal';
-import { ButtonColor, ButtonSize, ButtonVariant } from '../buttons/Button';
+import type { ButtonSize } from '../buttons/Button';
+import { ButtonColor, ButtonVariant } from '../buttons/Button';
 import { QuaternaryButton } from '../buttons/QuaternaryButton';
-import { IconSize, iconSizeToClassName } from '../Icon';
+import type { IconSize } from '../Icon';
+import { iconSizeToClassName } from '../Icon';
 import { MedalBadgeIcon } from '../icons';
 import InteractionCounter from '../InteractionCounter';
 import { Tooltip } from '../tooltip/Tooltip';
@@ -15,18 +16,30 @@ import { AuthTriggers } from '../../lib/auth';
 import { LazyModal } from '../modals/common/types';
 import type { LoggedUser } from '../../lib/user';
 import { useEngagementBarV2 } from '../../hooks/useEngagementBarV2';
+import type { CardActionDensity } from '../buttons/CardAction';
+import {
+  actionCounterClassName,
+  actionCounterLabelClassName,
+  FEED_ACTION_BUTTON_SIZE,
+  FEED_ACTION_ICON_SIZE,
+} from '../cards/common/actionCounter';
 import PostAwardActionV2 from './PostAwardAction.v2';
 
 export interface PostAwardActionProps {
   post: Post;
   iconSize?: IconSize;
-  density?: 'comfortable' | 'compact';
+  buttonSize?: ButtonSize;
+  density?: CardActionDensity;
 }
 
-const PostAwardActionV1 = ({ post, iconSize }: PostAwardActionProps) => {
+const PostAwardActionV1 = ({
+  post,
+  iconSize = FEED_ACTION_ICON_SIZE,
+  buttonSize = FEED_ACTION_BUTTON_SIZE,
+}: PostAwardActionProps) => {
   const { openModal } = useLazyModal();
   const { user, showLogin } = useAuthContext();
-  const isSameUser = user?.id === post?.author?.id;
+  const isSameUser = !!user?.id && user.id === post?.author?.id;
   const canAward = useCanAwardUser({
     sendingUser: user,
     receivingUser: post?.author as LoggedUser,
@@ -77,17 +90,17 @@ const PostAwardActionV1 = ({ post, iconSize }: PostAwardActionProps) => {
         id={`post-${post.id}-award-btn`}
         pressed={!!post.userState?.awarded}
         onClick={openAwardModal}
-        size={ButtonSize.Small}
+        size={buttonSize}
         className="btn-tertiary-cabbage pointer-events-auto"
         variant={ButtonVariant.Tertiary}
-        labelClassName="!pl-[1px]"
+        labelClassName={actionCounterLabelClassName}
         color={ButtonColor.Cabbage}
         icon={
           post.userState?.awarded && post.featuredAward?.award?.image ? (
             <Image
               src={post?.featuredAward?.award?.image}
               alt={post?.featuredAward?.award?.name}
-              className={iconSizeToClassName[IconSize.XSmall]}
+              className={iconSizeToClassName[iconSize]}
             />
           ) : (
             <MedalBadgeIcon secondary size={iconSize} />
@@ -96,10 +109,7 @@ const PostAwardActionV1 = ({ post, iconSize }: PostAwardActionProps) => {
       >
         {post?.numAwards > 0 && (
           <InteractionCounter
-            className={classNames(
-              'tabular-nums !typo-footnote',
-              !post.numAwards && 'invisible',
-            )}
+            className={actionCounterClassName}
             value={post.numAwards}
           />
         )}
diff --git a/packages/shared/src/components/post/PostAwardAction.v2.tsx b/packages/shared/src/components/post/PostAwardAction.v2.tsx
index 8c6ec1c4e66..997db1f4cab 100644
--- a/packages/shared/src/components/post/PostAwardAction.v2.tsx
+++ b/packages/shared/src/components/post/PostAwardAction.v2.tsx
@@ -4,8 +4,9 @@ import { useCanAwardUser } from '../../hooks/useCoresFeature';
 import { useLazyModal } from '../../hooks/useLazyModal';
 import { ButtonColor } from '../buttons/ButtonV2';
 import type { CardActionDensity } from '../buttons/CardAction';
-import { CardAction } from '../buttons/CardAction';
-import { IconSize, iconSizeToClassName } from '../Icon';
+import { CardAction, densityToIconSize } from '../buttons/CardAction';
+import type { IconSize } from '../Icon';
+import { iconSizeToClassName } from '../Icon';
 import { MedalBadgeIcon } from '../icons';
 import { Tooltip } from '../tooltip/Tooltip';
 import type { Post } from '../../graphql/posts';
@@ -22,12 +23,12 @@ export interface PostAwardActionProps {
 
 const PostAwardAction = ({
   post,
-  density = 'compact',
+  density = 'tight',
   iconSize,
 }: PostAwardActionProps) => {
   const { openModal } = useLazyModal();
   const { user, showLogin } = useAuthContext();
-  const isSameUser = user?.id === post?.author?.id;
+  const isSameUser = !!user?.id && user.id === post?.author?.id;
   const canAward = useCanAwardUser({
     sendingUser: user,
     receivingUser: post?.author as LoggedUser,
@@ -72,7 +73,7 @@ const PostAwardAction = ({
       <Image
         src={post?.featuredAward?.award?.image}
         alt={post?.featuredAward?.award?.name}
-        className={iconSizeToClassName[iconSize ?? IconSize.XSmall]}
+        className={iconSizeToClassName[iconSize ?? densityToIconSize[density]]}
       />
     ) : (
       <MedalBadgeIcon size={iconSize} />
diff --git a/packages/storybook/stories/components/cards/ActionBarAlignment.stories.tsx b/packages/storybook/stories/components/cards/ActionBarAlignment.stories.tsx
new file mode 100644
index 00000000000..07395c5564a
--- /dev/null
+++ b/packages/storybook/stories/components/cards/ActionBarAlignment.stories.tsx
@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { fn } from 'storybook/test';
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { PostType, UserVote } from '@dailydotdev/shared/src/graphql/posts';
+import { ArticleGrid } from '@dailydotdev/shared/src/components/cards/article/ArticleGrid';
+import ExtensionProviders from '../../extension/_providers';
+import { FeatureOverrides } from '../../../mock/GrowthBookProvider';
+
+const basePost = {
+  id: 'article-1',
+  title:
+    'Cloud Run now scales to zero, even when your service uses less than a single CPU or less than 1792 MB of memory',
+  permalink: 'https://api.daily.dev/r/article-1',
+  commentsPermalink: 'https://daily.dev/posts/article-1',
+  createdAt: '2024-01-15T10:30:00.000Z',
+  readTime: 8,
+  tags: ['javascript'],
+  type: PostType.Article,
+  image:
+    'https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/article-placeholder',
+  userState: { vote: UserVote.None, flags: { feedbackDismiss: false } },
+  // Matches the mocked boot user, so the award action renders on the
+  // card_impressions-off rows the way it does for a post's own author.
+  author: { id: 'u1', name: 'Dev Dana', username: 'devdana' },
+  source: {
+    id: 'tds',
+    handle: 'tds',
+    name: 'Towards Data Science',
+    permalink: 'https://app.daily.dev/sources/tds',
+    image: 'https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/tds',
+    type: 'machine' as const,
+    active: true,
+  },
+} as unknown as Post;
+
+const makePost = (
+  id: string,
+  numUpvotes: number,
+  numComments: number,
+  impressions: number,
+  numAwards: number,
+): Post =>
+  ({
+    ...basePost,
+    id,
+    numUpvotes,
+    numComments,
+    numAwards,
+    analytics: { impressions },
+  } as Post);
+
+const cases = [
+  { label: '36 · 3 · 52.4K · 4', post: makePost('a', 36, 3, 52400, 4) },
+  { label: '100 · 80 · 100K · 12', post: makePost('b', 100, 80, 100000, 12) },
+  { label: '200 · 80 · 200K · 99', post: makePost('c', 200, 80, 234500, 99) },
+  {
+    label: '9999 · 999 · 1.2M · 999',
+    post: makePost('d', 9999, 999, 1200000, 999),
+  },
+];
+
+const handlers = {
+  onPostClick: fn(),
+  onPostAuxClick: fn(),
+  onUpvoteClick: fn(),
+  onDownvoteClick: fn(),
+  onCommentClick: fn(),
+  onBookmarkClick: fn(),
+  onCopyLinkClick: fn(),
+  onShare: fn(),
+  onReadArticleClick: fn(),
+};
+
+const v1 = {
+  card_impressions: true,
+  engagement_bar_v2: false,
+};
+const v2 = { ...v1, engagement_bar_v2: true };
+const v1Control = { ...v1, card_impressions: false };
+const v2Control = { ...v2, card_impressions: false };
+
+const Row = ({
+  title,
+  values,
+  width,
+}: {
+  title: string;
+  values: Record<string, unknown>;
+  width: string;
+}) => (
+  <div className="mb-10">
+    <h3 className="mb-3 text-base font-bold text-text-primary">{title}</h3>
+    <div className="flex gap-6">
+      {cases.map(({ label, post }) => (
+        <div key={label} style={{ width }}>
+          <p className="mb-2 text-xs text-text-tertiary">{label}</p>
+          <FeatureOverrides values={values}>
+            <ArticleGrid post={post} {...handlers} />
+          </FeatureOverrides>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const ActionBarAlignment = () => (
+  <ExtensionProviders>
+    <div className="min-h-screen bg-background-default p-8">
+      <Row title="Default bar (v1) — 320px" values={v1} width="20rem" />
+      <Row
+        title="Default bar (v1) — 272px min card width"
+        values={v1}
+        width="17rem"
+      />
+      <Row title="Default bar (v2) — 320px" values={v2} width="20rem" />
+      <Row
+        title="Default bar (v2) — 272px min card width"
+        values={v2}
+        width="17rem"
+      />
+      <Row
+        title="Control, card_impressions off — v1 — 272px min card width"
+        values={v1Control}
+        width="17rem"
+      />
+      <Row
+        title="Control, card_impressions off — v2 — 272px min card width"
+        values={v2Control}
+        width="17rem"
+      />
+    </div>
+  </ExtensionProviders>
+);
+
+const meta: Meta<typeof ActionBarAlignment> = {
+  title: 'Components/Cards/ActionBarAlignment',
+  component: ActionBarAlignment,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof ActionBarAlignment> = {};
diff --git a/packages/storybook/stories/components/cards/ActionBarBeforeAfter.stories.tsx b/packages/storybook/stories/components/cards/ActionBarBeforeAfter.stories.tsx
new file mode 100644
index 00000000000..904d4913734
--- /dev/null
+++ b/packages/storybook/stories/components/cards/ActionBarBeforeAfter.stories.tsx
@@ -0,0 +1,326 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { fn } from 'storybook/test';
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { PostType, UserVote } from '@dailydotdev/shared/src/graphql/posts';
+import ActionButtons from '@dailydotdev/shared/src/components/cards/common/ActionButtons';
+import InteractionCounter from '@dailydotdev/shared/src/components/InteractionCounter';
+import { QuaternaryButton } from '@dailydotdev/shared/src/components/buttons/QuaternaryButton';
+import { CardAction } from '@dailydotdev/shared/src/components/buttons/CardAction';
+import { CardActionBar } from '@dailydotdev/shared/src/components/buttons/CardActionBar';
+import {
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { ButtonColor as ButtonColorV2 } from '@dailydotdev/shared/src/components/buttons/ButtonV2';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import {
+  AnalyticsIcon,
+  BookmarkIcon,
+  DiscussIcon,
+  DownvoteIcon,
+  LinkIcon,
+  MedalBadgeIcon,
+  UpvoteIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import ExtensionProviders from '../../extension/_providers';
+import { FeatureOverrides } from '../../../mock/GrowthBookProvider';
+
+const post = {
+  id: 'article-1',
+  title: 'Cloud Run now scales to zero',
+  permalink: 'https://api.daily.dev/r/article-1',
+  commentsPermalink: 'https://daily.dev/posts/article-1',
+  createdAt: '2024-01-15T10:30:00.000Z',
+  readTime: 8,
+  type: PostType.Article,
+  numUpvotes: 200,
+  numComments: 80,
+  numAwards: 99,
+  analytics: { impressions: 234500 },
+  userState: { vote: UserVote.None, flags: { feedbackDismiss: false } },
+  author: { id: 'u1', name: 'Dev Dana', username: 'devdana' },
+  source: {
+    id: 'tds',
+    handle: 'tds',
+    name: 'Towards Data Science',
+    permalink: 'https://app.daily.dev/sources/tds',
+    image: 'https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/tds',
+    type: 'machine' as const,
+    active: true,
+  },
+} as unknown as Post;
+
+const impressionsOn = {
+  card_impressions: true,
+  engagement_bar_v2: false,
+};
+const impressionsOnV2 = { ...impressionsOn, engagement_bar_v2: true };
+const control = { ...impressionsOn, card_impressions: false };
+const controlV2 = { ...impressionsOnV2, card_impressions: false };
+
+/**
+ * The v1 bar exactly as it stands on `main`: Small buttons, XSmall icons,
+ * `px-1 pb-1`, `!pl-[1px]` counters, and the award action hardcoded to Small.
+ * Kept as plain markup so the comparison survives future edits to the real one.
+ */
+const MainV1Bar = ({ withAward }: { withAward: boolean }) => (
+  <div className="flex flex-row items-center justify-between px-1 pb-1">
+    <div className="flex flex-1 items-center justify-between">
+      <QuaternaryButton
+        labelClassName="!pl-[1px]"
+        className="btn-tertiary-avocado"
+        color={ButtonColor.Avocado}
+        variant={ButtonVariant.Tertiary}
+        size={ButtonSize.Small}
+        icon={<UpvoteIcon size={IconSize.XSmall} />}
+      >
+        <InteractionCounter
+          className="tabular-nums typo-footnote"
+          value={200}
+        />
+      </QuaternaryButton>
+      <QuaternaryButton
+        labelClassName="!pl-[1px]"
+        className="btn-tertiary-blueCheese"
+        size={ButtonSize.Small}
+        icon={<DiscussIcon size={IconSize.XSmall} />}
+      >
+        <InteractionCounter className="tabular-nums typo-footnote" value={80} />
+      </QuaternaryButton>
+      <QuaternaryButton
+        color={ButtonColor.Ketchup}
+        variant={ButtonVariant.Tertiary}
+        size={ButtonSize.Small}
+        icon={<DownvoteIcon size={IconSize.XSmall} />}
+      />
+      {withAward && (
+        <QuaternaryButton
+          className="btn-tertiary-cabbage"
+          color={ButtonColor.Cabbage}
+          variant={ButtonVariant.Tertiary}
+          size={ButtonSize.Small}
+          labelClassName="!pl-[1px]"
+          icon={<MedalBadgeIcon secondary size={IconSize.XSmall} />}
+        >
+          <InteractionCounter
+            className="tabular-nums !typo-footnote"
+            value={99}
+          />
+        </QuaternaryButton>
+      )}
+      <QuaternaryButton
+        className="btn-tertiary-bun"
+        color={ButtonColor.Bun}
+        variant={ButtonVariant.Tertiary}
+        size={ButtonSize.Small}
+        icon={<BookmarkIcon size={IconSize.XSmall} />}
+      />
+      <QuaternaryButton
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Tertiary}
+        color={ButtonColor.Cabbage}
+        icon={<LinkIcon size={IconSize.XSmall} />}
+      />
+      {!withAward && (
+        <QuaternaryButton
+          labelClassName="!pl-[1px]"
+          className="btn-tertiary-cheese"
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Tertiary}
+          color={ButtonColor.Cheese}
+          icon={<AnalyticsIcon size={IconSize.XSmall} />}
+        >
+          <InteractionCounter
+            className="tabular-nums typo-footnote"
+            value={234500}
+          />
+        </QuaternaryButton>
+      )}
+    </div>
+  </div>
+);
+
+/** The v2 bar on `main`: compact density plus the `gap-1` on the feed row. */
+const MainV2Bar = ({ withAward }: { withAward: boolean }) => (
+  <div className="flex flex-row items-center justify-between px-1 pb-1">
+    <CardActionBar layout="feedCard" className="gap-1">
+      <CardAction
+        density="compact"
+        color={ButtonColorV2.Avocado}
+        icon={<UpvoteIcon />}
+        label="Upvote"
+        count={200}
+      />
+      <CardAction
+        density="compact"
+        icon={<DiscussIcon />}
+        label="Comments"
+        count={80}
+      />
+      <CardAction
+        density="compact"
+        color={ButtonColorV2.Ketchup}
+        icon={<DownvoteIcon />}
+        label="Downvote"
+      />
+      {withAward && (
+        <CardAction
+          density="compact"
+          color={ButtonColorV2.Cabbage}
+          icon={<MedalBadgeIcon />}
+          label="Award"
+          count={99}
+        />
+      )}
+      <CardAction
+        density="compact"
+        color={ButtonColorV2.Bun}
+        icon={<BookmarkIcon />}
+        label="Bookmark"
+      />
+      <CardAction
+        density="compact"
+        color={ButtonColorV2.Cabbage}
+        icon={<LinkIcon />}
+        label="Copy link"
+      />
+      {!withAward && (
+        <CardAction
+          density="compact"
+          color={ButtonColorV2.Cheese}
+          icon={<AnalyticsIcon />}
+          label="Impressions"
+          count={234500}
+        />
+      )}
+    </CardActionBar>
+  </div>
+);
+
+const CardFrame = ({
+  width,
+  children,
+}: {
+  width: number;
+  children: React.ReactNode;
+}) => (
+  <div
+    style={{ width }}
+    className="overflow-visible rounded-16 border border-border-subtlest-tertiary bg-surface-float"
+  >
+    <div className="h-20" />
+    {children}
+  </div>
+);
+
+const Pair = ({
+  title,
+  note,
+  width,
+  before,
+  values,
+}: {
+  title: string;
+  note: string;
+  width: number;
+  before: React.ReactNode;
+  values: Record<string, unknown>;
+}) => (
+  <section className="mb-12">
+    <h3 className="text-base font-bold text-text-primary">{title}</h3>
+    <p className="mb-4 max-w-2xl text-sm text-text-tertiary">{note}</p>
+    <div className="flex flex-wrap gap-10">
+      <div>
+        <p className="mb-2 text-xs font-bold text-accent-ketchup-default">
+          Before — main
+        </p>
+        <CardFrame width={width}>{before}</CardFrame>
+      </div>
+      <div>
+        <p className="mb-2 text-xs font-bold text-accent-avocado-default">
+          After — this PR
+        </p>
+        <CardFrame width={width}>
+          <FeatureOverrides values={values}>
+            <ActionButtons
+              post={post}
+              variant="grid"
+              onUpvoteClick={fn()}
+              onCommentClick={fn()}
+              onBookmarkClick={fn()}
+              onCopyLinkClick={fn()}
+              onDownvoteClick={fn()}
+            />
+          </FeatureOverrides>
+        </CardFrame>
+      </div>
+    </div>
+  </section>
+);
+
+const ActionBarBeforeAfter = () => (
+  <ExtensionProviders>
+    <div className="min-h-screen bg-background-default p-8">
+      <h2 className="mb-2 text-2xl font-bold text-text-primary">
+        Default card action bar — before / after
+      </h2>
+      <p className="mb-8 max-w-3xl text-sm text-text-tertiary">
+        Every card here holds the same post — 200 upvotes, 80 comments, 99
+        awards, 234.5K impressions — so the only difference between the two
+        columns is the bar itself.
+      </p>
+
+      <Pair
+        title="1. Impressions on, 320px"
+        note="Award action dropped, and the impressions number moves from 5px off the card edge to 13px. Buttons go 32px → 24px, icons 20px → 16px, and the row keeps its 36px height."
+        width={320}
+        values={impressionsOn}
+        before={<MainV1Bar withAward={false} />}
+      />
+
+      <Pair
+        title="2. Impressions on, 272px min card width"
+        note="At the narrowest grid track the number did not just crowd the edge, it crossed it: on main it sits 6px outside the card. It now ends 13px inside."
+        width={272}
+        values={impressionsOn}
+        before={<MainV1Bar withAward={false} />}
+      />
+
+      <Pair
+        title="3. Control — card_impressions off, 272px"
+        note="The award action still renders here, so this is the widest layout. Main is uniformly 32px; this PR is uniformly 24px. The award button is the one that had to be threaded through — it hardcoded its own size, which a review caught before merge."
+        width={272}
+        values={control}
+        before={<MainV1Bar withAward />}
+      />
+
+      <Pair
+        title="4. Engagement bar v2, impressions on, 272px"
+        note="On main this row needed more width than the card had, so the trailing action hung outside the rounded corner. The tight density and the removed row gap bring it back inside."
+        width={272}
+        values={impressionsOnV2}
+        before={<MainV2Bar withAward={false} />}
+      />
+
+      <Pair
+        title="5. Engagement bar v2, control, 272px"
+        note="Same row with the award action instead of impressions."
+        width={272}
+        values={controlV2}
+        before={<MainV2Bar withAward />}
+      />
+    </div>
+  </ExtensionProviders>
+);
+
+const meta: Meta<typeof ActionBarBeforeAfter> = {
+  title: 'Components/Cards/ActionBarBeforeAfter',
+  component: ActionBarBeforeAfter,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof ActionBarBeforeAfter> = {};
diff --git a/packages/webapp/pages/dev/buttons.tsx b/packages/webapp/pages/dev/buttons.tsx
index 0b9b222e59a..6cfcd93842d 100644
--- a/packages/webapp/pages/dev/buttons.tsx
+++ b/packages/webapp/pages/dev/buttons.tsx
@@ -621,14 +621,14 @@ const V1EngagementBar = ({ pressed = false }: { pressed?: boolean }) => (
 );
 
 /**
- * v2 engagement bar — `density="compact"` + `feedCard` layout, the
- * production rule for grid cards. Width footprint matches v1
- * exactly (5 × 32 px), so swapping in is layout-neutral.
+ * v2 engagement bar — `density="tight"` + `feedCard` layout, the
+ * production rule for grid cards. 24 px buttons with 16 px icons,
+ * matching the v1 bar.
  */
 const V2EngagementBar = ({ pressed = false }: { pressed?: boolean }) => (
   <CardActionBar layout="feedCard">
     <CardAction
-      density="compact"
+      density="tight"
       pressed={pressed}
       icon={<UpvoteIcon />}
       iconPressed={<UpvoteIcon secondary />}
@@ -637,28 +637,28 @@ const V2EngagementBar = ({ pressed = false }: { pressed?: boolean }) => (
       count={1234}
     />
     <CardAction
-      density="compact"
+      density="tight"
       icon={<DownvoteIcon />}
       iconPressed={<DownvoteIcon secondary />}
       label="Downvote"
       color={ButtonColor.Ketchup}
     />
     <CardAction
-      density="compact"
+      density="tight"
       icon={<DiscussIcon />}
       label="Comment"
       color={ButtonColor.BlueCheese}
       count={42}
     />
     <CardAction
-      density="compact"
+      density="tight"
       icon={<BookmarkIcon />}
       iconPressed={<BookmarkIcon secondary />}
       label="Bookmark"
       color={ButtonColor.Bun}
     />
     <CardAction
-      density="compact"
+      density="tight"
       icon={<CopyIcon />}
       label="Copy link"
       color={ButtonColor.Cabbage}
@@ -1141,7 +1141,7 @@ const ButtonsDevPage = (): ReactElement => {
             Subtle = outlined chip, <em>Material 3 outlined pattern</em>).{' '}
             <strong>Card-action width contract:</strong> on a multi-column feed
             grid (where a card can render at 140 – 280 px), use{' '}
-            <code>density=&quot;compact&quot;</code> on every{' '}
+            <code>density=&quot;tight&quot;</code> on every{' '}
             <code>CardAction</code> and wrap the row in{' '}
             <code>&lt;CardActionBar layout=&quot;feedCard&quot;&gt;</code> — the
             bar then sits at <code>flex-1 min-w-0 justify-between</code>{' '}
@@ -1389,7 +1389,7 @@ const ButtonsDevPage = (): ReactElement => {
 
           <Section
             title="Card actions / engagement bar"
-            description="Dedicated v2 primitive for the upvote / comment / bookmark / share row that lives on every post card. Built on ButtonV2 (Tertiary). Two densities: comfortable (40 px) for single-column / post-detail / sticky bottom bar; compact (32 px) for multi-column feed grid cards, comment rows, dense menus. The feed-card vignettes below are wrapped in real production card-width containers — MIN 272 px (tablet 2-col grid, the floor at the 656 px breakpoint), 300 px (typical laptop 3-col), MAX 340 px (desktopL 21.25 rem clamp), and mobile single-column 360 px — so the width contract is visually verifiable. `density='compact'` + `<CardActionBar layout='feedCard'>` is the production rule for any grid card so the bar never pushes the card wider than its grid track."
+            description="Dedicated v2 primitive for the upvote / comment / bookmark / share row that lives on every post card. Built on ButtonV2 (Tertiary). Three densities: comfortable (40 px) for single-column / post-detail / sticky bottom bar; compact (32 px) for comment rows and dense menus; tight (24 px, 16 px icons) for feed grid cards. The feed-card vignettes below are wrapped in real production card-width containers — MIN 272 px (tablet 2-col grid, the floor at the 656 px breakpoint), 300 px (typical laptop 3-col), MAX 340 px (desktopL 21.25 rem clamp), and mobile single-column 360 px — so the width contract is visually verifiable. `density='tight'` + `<CardActionBar layout='feedCard'>` is the production rule for any grid card so the bar never pushes the card wider than its grid track: buttons never shrink (global flex-shrink: 0), so six actions with counters have to fit 272 px on their intrinsic widths alone."
           >
             <div className="space-y-3">
               <VignetteRow
@@ -1432,27 +1432,27 @@ const ButtonsDevPage = (): ReactElement => {
                   <div className="w-[272px] rounded-12 border border-border-subtlest-tertiary p-3">
                     <CardActionBar layout="feedCard">
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<UpvoteIcon />}
                         iconPressed={<UpvoteIcon secondary />}
                         label="Upvote"
                         color={ButtonColor.Avocado}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<DiscussIcon />}
                         label="Comment"
                         color={ButtonColor.BlueCheese}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<BookmarkIcon />}
                         iconPressed={<BookmarkIcon secondary />}
                         label="Bookmark"
                         color={ButtonColor.Bun}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<ShareIcon />}
                         label="Share"
                       />
@@ -1506,7 +1506,7 @@ const ButtonsDevPage = (): ReactElement => {
                   <div className="w-[272px] rounded-12 border border-border-subtlest-tertiary p-3">
                     <CardActionBar layout="feedCard">
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<UpvoteIcon />}
                         iconPressed={<UpvoteIcon secondary />}
                         label="Upvote"
@@ -1514,21 +1514,21 @@ const ButtonsDevPage = (): ReactElement => {
                         count={1234}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<DiscussIcon />}
                         label="Comment"
                         color={ButtonColor.BlueCheese}
                         count={42}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<BookmarkIcon />}
                         iconPressed={<BookmarkIcon secondary />}
                         label="Bookmark"
                         color={ButtonColor.Bun}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<ShareIcon />}
                         label="Share"
                       />
@@ -1584,7 +1584,7 @@ const ButtonsDevPage = (): ReactElement => {
                   <div className="w-[272px] rounded-12 border border-border-subtlest-tertiary p-3">
                     <CardActionBar layout="feedCard">
                       <CardAction
-                        density="compact"
+                        density="tight"
                         pressed
                         icon={<UpvoteIcon />}
                         iconPressed={<UpvoteIcon secondary />}
@@ -1593,14 +1593,14 @@ const ButtonsDevPage = (): ReactElement => {
                         count={1235}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<DiscussIcon />}
                         label="Comment"
                         color={ButtonColor.BlueCheese}
                         count={42}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         pressed
                         icon={<BookmarkIcon />}
                         iconPressed={<BookmarkIcon secondary />}
@@ -1608,7 +1608,7 @@ const ButtonsDevPage = (): ReactElement => {
                         color={ButtonColor.Bun}
                       />
                       <CardAction
-                        density="compact"
+                        density="tight"
                         icon={<ShareIcon />}
                         label="Share"
                       />
@@ -1685,34 +1685,34 @@ const ButtonsDevPage = (): ReactElement => {
                         </div>
                         <CardActionBar layout="feedCard">
                           <CardAction
-                            density="compact"
+                            density="tight"
                             icon={<UpvoteIcon />}
                             iconPressed={<UpvoteIcon secondary />}
                             label="Upvote"
                             color={ButtonColor.Avocado}
                           />
                           <CardAction
-                            density="compact"
+                            density="tight"
                             icon={<DownvoteIcon />}
                             iconPressed={<DownvoteIcon secondary />}
                             label="Downvote"
                             color={ButtonColor.Ketchup}
                           />
                           <CardAction
-                            density="compact"
+                            density="tight"
                             icon={<DiscussIcon />}
                             label="Comment"
                             color={ButtonColor.BlueCheese}
                           />
                           <CardAction
-                            density="compact"
+                            density="tight"
                             icon={<BookmarkIcon />}
                             iconPressed={<BookmarkIcon secondary />}
                             label="Bookmark"
                             color={ButtonColor.Bun}
                           />
                           <CardAction
-                            density="compact"
+                            density="tight"
                             icon={<ShareIcon />}
                             label="Share"
                           />
@@ -1773,13 +1773,13 @@ const ButtonsDevPage = (): ReactElement => {
                     </div>
                     <div className="w-[272px] rounded-12 border border-accent-avocado-default p-3">
                       <div className="mb-2 text-accent-avocado-default typo-caption1">
-                        RIGHT @ 272 px · feedCard layout + compact density — bar
+                        RIGHT @ 272 px · feedCard layout + tight density — bar
                         fills 272 px, distributes children, never pushes the
                         card
                       </div>
                       <CardActionBar layout="feedCard">
                         <CardAction
-                          density="compact"
+                          density="tight"
                           icon={<UpvoteIcon />}
                           iconPressed={<UpvoteIcon secondary />}
                           label="Upvote"
@@ -1787,28 +1787,28 @@ const ButtonsDevPage = (): ReactElement => {
                           count={1234}
                         />
                         <CardAction
-                          density="compact"
+                          density="tight"
                           icon={<DownvoteIcon />}
                           iconPressed={<DownvoteIcon secondary />}
                           label="Downvote"
                           color={ButtonColor.Ketchup}
                         />
                         <CardAction
-                          density="compact"
+                          density="tight"
                           icon={<DiscussIcon />}
                           label="Comment"
                           color={ButtonColor.BlueCheese}
                           count={42}
                         />
                         <CardAction
-                          density="compact"
+                          density="tight"
                           icon={<BookmarkIcon />}
                           iconPressed={<BookmarkIcon secondary />}
                           label="Bookmark"
                           color={ButtonColor.Bun}
                         />
                         <CardAction
-                          density="compact"
+                          density="tight"
                           icon={<ShareIcon />}
                           label="Share"
                         />