From b1549b19ad164888f1dc040df9dca9379323d411 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Sun, 17 May 2026 11:20:12 +0300
Subject: [PATCH 1/2] feat(buttons): unified TagChip rollout + small targeted
 UX fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layered on top of #6061 (V1 reskin). Five independent, low-risk
follow-ups that the reskin alone doesn't deliver:

1. **TagChip rollout** — adopt the unified `TagChip` primitive
   (already in #6061) on its two production call sites:
   - Article post / modal tag list now renders `TagChip` at size `sm`
     (passes through to `BrandedTagChip` when an engagement-ad tag is
     in the list, preserving the existing ads-aware variant).
   - Tags directory page (`/tags`) renders `TagChip` at size `md` with
     follow affordance wired through `useTagAndSource`.
   - New `Atoms/TagChip` Storybook story with size + state matrix.

2. **ProfileHeader edit-cover button** — fix typo where the Float
   variant was passed via `type=` instead of `variant=`, so the prop
   was silently ignored and the button rendered as default. (1 line)

3. **SidebarMenuIcon expand toggle** — pin icon to `IconSize.Size16`.
   The default XSmall-button icon is 20 px after the reskin, which
   reads oversized inside the 24 px collapse-hairline button. (1 prop)

4. **ReadArticleButton** — drop `secondary` modifier on `OpenLinkIcon`
   so the outlined glyph renders instead of the filled variant. (2 props)

5. **Strict typecheck skip list** — add `ProfileHeader.tsx` and
   `tags/index.tsx` to the buttons-v2 strict-skip set. Both files
   carry pre-existing strict violations on unrelated lines
   (`user.companies` optionality on ProfileHeader; reduce accumulator
   typed as `never[]` on the tags directory) that should be addressed
   in a dedicated cleanup PR.

Note: the original consolidated branch also added an `onUnfollowTag`
plumbing path through `useFollowPostTags`, but the followup
`fix(tags): drop unfollow ×` commit reverted the inline unfollow
behaviour. Final TagChip API has no `onUnfollow` prop, so this PR
ships the hook unchanged.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../cards/common/ReadArticleButton.tsx        |   4 +-
 .../src/components/post/tags/PostTagList.tsx  | 206 +++++++-----------
 .../src/components/profile/ProfileHeader.tsx  |   2 +-
 .../components/sidebar/SidebarMenuIcon.tsx    |   9 +-
 .../stories/atoms/TagChip.stories.tsx         | 169 ++++++++++++++
 packages/webapp/pages/tags/index.tsx          |  23 +-
 scripts/typecheck-strict-changed.js           |   8 +
 7 files changed, 281 insertions(+), 140 deletions(-)
 create mode 100644 packages/storybook/stories/atoms/TagChip.stories.tsx

diff --git a/packages/shared/src/components/cards/common/ReadArticleButton.tsx b/packages/shared/src/components/cards/common/ReadArticleButton.tsx
index dc3d3891304..d1d4b6070dd 100644
--- a/packages/shared/src/components/cards/common/ReadArticleButton.tsx
+++ b/packages/shared/src/components/cards/common/ReadArticleButton.tsx
@@ -13,7 +13,7 @@ export const getReadPostButtonIcon = (
   isPostOrSharedPostTwitter(post) ? (
     <TwitterIcon size={IconSize.Size16} />
   ) : (
-    <OpenLinkIcon secondary />
+    <OpenLinkIcon />
   );
 
 type ReadArticleButtonProps = ButtonProps<'a'> & {
@@ -31,7 +31,7 @@ export const ReadArticleButton = ({
   <Button
     tag="a"
     size={size}
-    icon={<OpenLinkIcon secondary />}
+    icon={<OpenLinkIcon />}
     iconPosition={ButtonIconPosition.Right}
     target={openNewTab ? '_blank' : '_self'}
     {...props}
diff --git a/packages/shared/src/components/post/tags/PostTagList.tsx b/packages/shared/src/components/post/tags/PostTagList.tsx
index af4e5fb5301..819f3bc4062 100644
--- a/packages/shared/src/components/post/tags/PostTagList.tsx
+++ b/packages/shared/src/components/post/tags/PostTagList.tsx
@@ -1,177 +1,125 @@
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import React, { memo, useMemo } from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
 import { useFollowPostTags } from '../../../hooks/feed/useFollowPostTags';
-import type { TypographyProps } from '../../typography/Typography';
-import {
-  Typography,
-  TypographyColor,
-  TypographyTag,
-  TypographyType,
-} from '../../typography/Typography';
-import { getTagPageLink } from '../../../lib';
+import { TagChip } from '../../tags/TagChip';
+import { BrandedTag } from '../../brand/BrandedTag';
+import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
 import Link from '../../utilities/Link';
+import { getTagPageLink } from '../../../lib';
 import { Button, ButtonSize } from '../../buttons/Button';
 import { PlusIcon } from '../../icons';
 import { IconSize } from '../../Icon';
 import { Tooltip } from '../../tooltip/Tooltip';
-import { BrandedTag } from '../../brand/BrandedTag';
-import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
 
 interface PostTagListProps {
   post: Post;
 }
 
-interface PostTagItemProps {
-  isFollowed?: boolean;
-  onFollow?: (tag: string) => void;
+interface BrandedTagChipProps {
   tag: string;
-  /** Render the BrandedTag wrapper for engagement-ads styling. Off by default — preserves the original chip layout when no creative is present. */
-  useBrandedRenderer?: boolean;
+  isFollowed: boolean;
+  onFollow: (tag: string) => void;
   disableBranding?: boolean;
 }
 
-const Chip = <T extends TypographyTag>({
-  children,
-  className,
-  ...props
-}: PropsWithChildren<TypographyProps<T>>) => (
-  <Typography
-    className={classNames(
-      'cursor-pointer rounded-10 border-border-subtlest-tertiary transition-colors',
-      className,
-    )}
-    color={TypographyColor.Tertiary}
-    tag={TypographyTag.Span}
-    type={TypographyType.Caption1}
-    {...props}
-  >
-    {children}
-  </Typography>
-);
-
-const PostTagItem = ({
+/**
+ * Engagement-ads variant — kept separate from the standard `TagChip`
+ * so the `BrandedTag` wrapper (with its own padding / border quirks)
+ * does not bleed into the unified chip design used everywhere else.
+ */
+const BrandedTagChip = ({
+  tag,
   isFollowed,
   onFollow,
-  tag,
-  useBrandedRenderer,
   disableBranding,
-}: PostTagItemProps): ReactElement => {
-  // Default rendering — matches the pre-engagement-ads layout exactly.
-  // Used when no creative is sponsoring any tag in the list.
-  if (!useBrandedRenderer) {
-    if (isFollowed) {
-      return (
-        <Link href={getTagPageLink(tag)} passHref prefetch={false}>
-          <Chip
-            className="border px-2 py-1 hover:bg-border-subtlest-tertiary"
-            role="listitem"
-            tag={TypographyTag.Link}
-            title={`Check all #${tag} posts`}
-          >
-            #{tag}
-          </Chip>
-        </Link>
-      );
-    }
-
-    return (
-      <Chip className="flex items-center bg-surface-float" role="listitem">
-        <Link href={getTagPageLink(tag)} passHref>
-          <a
-            className="inline-block px-2 py-1"
-            title={`Check all #${tag} posts`}
-          >{`#${tag}`}</a>
-        </Link>
+}: BrandedTagChipProps): ReactElement => (
+  <span
+    role="listitem"
+    className={classNames(
+      'inline-flex items-center rounded-8',
+      isFollowed ? '' : 'bg-surface-float',
+    )}
+  >
+    <Link href={getTagPageLink(tag)} passHref prefetch={false}>
+      <a title={`Check all #${tag} posts`}>
+        <BrandedTag
+          tag={tag}
+          asSpan
+          disableBranding={disableBranding}
+          className={
+            isFollowed
+              ? 'border px-2 py-1 hover:bg-border-subtlest-tertiary'
+              : '!h-auto !border-0 !bg-transparent py-1'
+          }
+        />
+      </a>
+    </Link>
+    {!isFollowed && (
+      <>
         <span
-          className="h-3 translate-y-px rounded-2 border border-border-subtlest-tertiary"
+          aria-hidden
           role="separator"
+          className="mx-2 h-3 w-px bg-border-subtlest-tertiary"
         />
         <Tooltip content={`Follow #${tag}`}>
           <Button
+            type="button"
+            size={ButtonSize.XSmall}
             icon={<PlusIcon aria-hidden size={IconSize.XSmall} />}
             onClick={() => onFollow(tag)}
-            size={ButtonSize.XSmall}
-            type="button"
+            aria-label={`Follow #${tag}`}
           />
         </Tooltip>
-      </Chip>
-    );
-  }
-
-  // Engagement-ads-aware rendering. Only used when at least one tag in
-  // the list is sponsored.
-  return (
-    <Chip
-      className={classNames(
-        'flex items-center',
-        isFollowed ? '' : 'bg-surface-float',
-      )}
-      role="listitem"
-    >
-      <Link href={getTagPageLink(tag)} passHref prefetch={false}>
-        <a title={`Check all #${tag} posts`}>
-          <BrandedTag
-            tag={tag}
-            asSpan
-            disableBranding={disableBranding}
-            className={
-              isFollowed
-                ? 'border px-2 py-1 hover:bg-border-subtlest-tertiary'
-                : '!h-auto !border-0 !bg-transparent py-1'
-            }
-          />
-        </a>
-      </Link>
-      {!isFollowed && (
-        <>
-          <span
-            className="h-3 translate-y-px rounded-2 border border-border-subtlest-tertiary"
-            role="separator"
-          />
-          <Tooltip content={`Follow #${tag}`}>
-            <Button
-              icon={<PlusIcon aria-hidden size={IconSize.XSmall} />}
-              onClick={() => onFollow(tag)}
-              size={ButtonSize.XSmall}
-              type="button"
-            />
-          </Tooltip>
-        </>
-      )}
-    </Chip>
-  );
-};
+      </>
+    )}
+  </span>
+);
 
 const PostTagListInner = ({ post }: PostTagListProps): ReactElement => {
   const { onFollowTag, tags } = useFollowPostTags({ post });
   const { isTagSponsored } = useBrandSponsorship();
 
-  const firstSponsoredTag = useMemo(() => {
-    return tags.all.find((tag) => isTagSponsored(tag)) || null;
-  }, [tags.all, isTagSponsored]);
+  const firstSponsoredTag = useMemo(
+    () => tags.all.find((tag) => isTagSponsored(tag)) || null,
+    [tags.all, isTagSponsored],
+  );
 
   if (!tags.all.length) {
     return null;
   }
 
   const followedSet = new Set(tags.followed);
-
   const useBrandedRenderer = firstSponsoredTag !== null;
 
   return (
     <ul aria-label="Post tags" className="flex flex-wrap items-center gap-2">
-      {tags.all.map((tag) => (
-        <PostTagItem
-          key={tag}
-          tag={tag}
-          isFollowed={followedSet.has(tag)}
-          onFollow={onFollowTag}
-          useBrandedRenderer={useBrandedRenderer}
-          disableBranding={tag !== firstSponsoredTag}
-        />
-      ))}
+      {tags.all.map((tag) => {
+        const isFollowed = followedSet.has(tag);
+
+        if (useBrandedRenderer) {
+          return (
+            <BrandedTagChip
+              key={tag}
+              tag={tag}
+              isFollowed={isFollowed}
+              onFollow={onFollowTag}
+              disableBranding={tag !== firstSponsoredTag}
+            />
+          );
+        }
+
+        return (
+          <TagChip
+            key={tag}
+            tag={tag}
+            size="sm"
+            isFollowed={isFollowed}
+            onFollow={onFollowTag}
+          />
+        );
+      })}
     </ul>
   );
 };
diff --git a/packages/shared/src/components/profile/ProfileHeader.tsx b/packages/shared/src/components/profile/ProfileHeader.tsx
index 8ac86736106..007c87e4bc9 100644
--- a/packages/shared/src/components/profile/ProfileHeader.tsx
+++ b/packages/shared/src/components/profile/ProfileHeader.tsx
@@ -80,7 +80,7 @@ const ProfileHeader = ({
             )}
             tag="a"
             disabled={!isSameUser}
-            type={ButtonVariant.Float}
+            variant={ButtonVariant.Float}
             icon={<EditIcon />}
             aria-label="Edit profile"
           />
diff --git a/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx b/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
index 9129d67cfc2..06fc389e617 100644
--- a/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
+++ b/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { SidebarArrowLeft, SidebarArrowRight } from '../icons';
+import { IconSize } from '../Icon';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { useLogContext } from '../../contexts/LogContext';
 import { Tooltip } from '../tooltip/Tooltip';
@@ -40,7 +41,13 @@ export const SidebarMenuIcon = (): ReactElement => {
           size={ButtonSize.XSmall}
           onClick={logAndToggleSidebarExpanded}
           className="text-text-tertiary hover:text-text-primary"
-          icon={sidebarExpanded ? <SidebarArrowLeft /> : <SidebarArrowRight />}
+          icon={
+            sidebarExpanded ? (
+              <SidebarArrowLeft size={IconSize.Size16} />
+            ) : (
+              <SidebarArrowRight size={IconSize.Size16} />
+            )
+          }
           aria-label={sidebarExpanded ? 'Close sidebar' : 'Open sidebar'}
         />
       </Tooltip>
diff --git a/packages/storybook/stories/atoms/TagChip.stories.tsx b/packages/storybook/stories/atoms/TagChip.stories.tsx
new file mode 100644
index 00000000000..0716bf72b32
--- /dev/null
+++ b/packages/storybook/stories/atoms/TagChip.stories.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  TagChip,
+  type TagChipSize,
+} from '@dailydotdev/shared/src/components/tags/TagChip';
+
+const meta: Meta<typeof TagChip> = {
+  title: 'Atoms/TagChip',
+  component: TagChip,
+  parameters: {
+    controls: { expanded: true },
+    layout: 'padded',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'] satisfies TagChipSize[],
+    },
+    isFollowed: { control: 'boolean' },
+    tag: { control: 'text' },
+  },
+  args: {
+    tag: 'webdev',
+    size: 'sm',
+    isFollowed: false,
+    onFollow: () => undefined,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TagChip>;
+
+/**
+ * Default story — playground for tweaking size, followed state, and tag
+ * label via Storybook controls. Use the controls panel to flip between
+ * `sm` / `md` / `lg` and followed / not-followed.
+ */
+export const Default: Story = {};
+
+/**
+ * Three sizes, both states. Use this to compare densities side-by-side.
+ *
+ * The "followed" treatment is intentionally a plain bordered chip (no
+ * separator, no action button) so it reads as a passive label. Unfollow
+ * lives on the tag page itself, not inline — see the comment in
+ * `TagChip.tsx` for the full rationale.
+ */
+export const SizesAndStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {(['sm', 'md', 'lg'] satisfies TagChipSize[]).map((size) => (
+        <section key={size} className="flex flex-col gap-2">
+          <div className="font-bold text-text-tertiary typo-footnote">
+            Size: {size}
+          </div>
+          <div className="flex flex-wrap items-center gap-3">
+            <TagChip
+              tag="webdev"
+              size={size}
+              isFollowed={false}
+              onFollow={() => undefined}
+            />
+            <TagChip
+              tag="javascript"
+              size={size}
+              isFollowed
+              onFollow={() => undefined}
+            />
+            <TagChip
+              tag="typescript"
+              size={size}
+              isFollowed={false}
+              onFollow={() => undefined}
+            />
+            <TagChip
+              tag="react"
+              size={size}
+              isFollowed
+              onFollow={() => undefined}
+            />
+          </div>
+        </section>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Recommended surface mapping. Keep this in sync with `TagChip.tsx` so
+ * call sites pick the right density.
+ */
+export const SurfaceUsage: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <section className="flex flex-col gap-2">
+        <div className="font-bold text-text-tertiary typo-footnote">
+          sm (24 px) — article post / modal, in-card chips
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <TagChip
+            tag="webdev"
+            size="sm"
+            isFollowed={false}
+            onFollow={() => undefined}
+          />
+          <TagChip
+            tag="javascript"
+            size="sm"
+            isFollowed
+            onFollow={() => undefined}
+          />
+          <TagChip
+            tag="typescript"
+            size="sm"
+            isFollowed={false}
+            onFollow={() => undefined}
+          />
+        </div>
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <div className="font-bold text-text-tertiary typo-footnote">
+          md (32 px) — tags directory, search panels
+        </div>
+        <div className="flex flex-wrap items-center gap-3">
+          <TagChip
+            tag="webdev"
+            size="md"
+            isFollowed={false}
+            onFollow={() => undefined}
+          />
+          <TagChip
+            tag="javascript"
+            size="md"
+            isFollowed
+            onFollow={() => undefined}
+          />
+          <TagChip
+            tag="typescript"
+            size="md"
+            isFollowed={false}
+            onFollow={() => undefined}
+          />
+        </div>
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <div className="font-bold text-text-tertiary typo-footnote">
+          lg (40 px) — featured / hero placements
+        </div>
+        <div className="flex flex-wrap items-center gap-4">
+          <TagChip
+            tag="webdev"
+            size="lg"
+            isFollowed={false}
+            onFollow={() => undefined}
+          />
+          <TagChip
+            tag="javascript"
+            size="lg"
+            isFollowed
+            onFollow={() => undefined}
+          />
+        </div>
+      </section>
+    </div>
+  ),
+};
diff --git a/packages/webapp/pages/tags/index.tsx b/packages/webapp/pages/tags/index.tsx
index d7313f5a2c2..e569b5ab7e9 100644
--- a/packages/webapp/pages/tags/index.tsx
+++ b/packages/webapp/pages/tags/index.tsx
@@ -5,7 +5,7 @@ import Head from 'next/head';
 import type { NextSeoProps } from 'next-seo/lib/types';
 import type { Keyword } from '@dailydotdev/shared/src/graphql/keywords';
 import { TAG_DIRECTORY_QUERY } from '@dailydotdev/shared/src/graphql/keywords';
-import { TagLink } from '@dailydotdev/shared/src/components/TagLinks';
+import { TagChip } from '@dailydotdev/shared/src/components/tags/TagChip';
 import { HashtagIcon } from '@dailydotdev/shared/src/components/icons';
 import { IconSize } from '@dailydotdev/shared/src/components/Icon';
 import { ApiError, gqlClient } from '@dailydotdev/shared/src/graphql/common';
@@ -15,7 +15,8 @@ import type { GraphQLError } from '@dailydotdev/shared/src/lib/errors';
 import { PageWrapperLayout } from '@dailydotdev/shared/src/components/layout/PageWrapperLayout';
 import { TagTopList } from '@dailydotdev/shared/src/components/cards/Leaderboard';
 import useFeedSettings from '@dailydotdev/shared/src/hooks/useFeedSettings';
-import { ButtonSize } from '@dailydotdev/shared/src/components/buttons/common';
+import useTagAndSource from '@dailydotdev/shared/src/hooks/useTagAndSource';
+import { Origin } from '@dailydotdev/shared/src/lib/log';
 import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
 import { getLayout } from '../../components/layouts/MainLayout';
 import { defaultOpenGraph } from '../../next-seo';
@@ -70,7 +71,13 @@ const TagsPage = ({
   const { isFallback: isLoading } = useRouter();
 
   const { feedSettings } = useFeedSettings();
-  const selectedTags = feedSettings?.includeTags || [];
+  const { onFollowTags } = useTagAndSource({
+    origin: Origin.TagsFilter,
+  });
+  const followedSet = useMemo(
+    () => new Set(feedSettings?.includeTags || []),
+    [feedSettings?.includeTags],
+  );
 
   const recentlyAddedTags = useMemo(() => {
     return tags
@@ -164,12 +171,14 @@ const TagsPage = ({
                   {letter}
                 </p>
                 {value.map((tag) => (
-                  <TagLink
+                  <TagChip
                     key={tag.value}
                     tag={tag.value}
-                    className="!line-clamp-2 !h-auto py-1.5"
-                    isSelected={selectedTags.includes(tag.value)}
-                    buttonProps={{ size: ButtonSize.Small }}
+                    size="md"
+                    isFollowed={followedSet.has(tag.value)}
+                    onFollow={(name) =>
+                      onFollowTags({ tags: [name], requireLogin: true })
+                    }
                   />
                 ))}
               </div>
diff --git a/scripts/typecheck-strict-changed.js b/scripts/typecheck-strict-changed.js
index 192b7af542c..240c00ac1a3 100644
--- a/scripts/typecheck-strict-changed.js
+++ b/scripts/typecheck-strict-changed.js
@@ -99,6 +99,14 @@ const strictSkipList = new Set([
   // field has no `types` condition, so strict resolution intermittently fails
   // to find declarations and flags the JSONValue import as implicit any.
   'packages/shared/src/lib/featureManagement.ts',
+  // Buttons-v2 small-fixes branch — these files are touched for tiny scope-1
+  // changes (a `type` -> `variant` prop typo fix and a TagChip swap on the
+  // tags directory). The pre-existing strict violations on unrelated lines
+  // (`user.companies` optionality, `tagsByFirstLetter` reduce accumulator
+  // typed as `never[]`) are unrelated to this PR and should be addressed in
+  // a dedicated cleanup PR.
+  'packages/shared/src/components/profile/ProfileHeader.tsx',
+  'packages/webapp/pages/tags/index.tsx',
 ]);
 
 const changedFiles = getChangedTypescriptFiles().filter(

From 0d220543ddb4320d0b751e8257b1f32dcc0174bd Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Sun, 17 May 2026 12:31:49 +0300
Subject: [PATCH 2/2] fix(tags): keep /tags passive, harden TagChip overflow,
 clear strict skips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `/tags` directory drops the inline follow CTA (no `onFollow`,
  removes the unused `useTagAndSource` import). Chips stay as
  link-only labels — matches the on-main behavior; `isFollowed`
  still drives bordered-vs-filled treatment so logged-in users
  scan their tags at a glance.

- `TagChip` truncates long labels in-place (`min-w-0 truncate` on
  the label, `max-w-full` on the chip) and pins the separator +
  `+` button with `shrink-0` so they never get pushed off-screen
  by an over-long tag value.

- Fix the underlying strict-mode errors in `pages/tags/index.tsx`
  (typed reduce accumulators) and `ProfileHeader.tsx` (`!!length`
  guard) and remove both files from the strict-skip list so
  future regressions surface instead of getting silently allowed.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/profile/ProfileHeader.tsx  |  4 +--
 .../shared/src/components/tags/TagChip.tsx    | 17 +++++++++---
 packages/webapp/pages/tags/index.tsx          | 27 +++++++++----------
 scripts/typecheck-strict-changed.js           |  8 ------
 4 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/packages/shared/src/components/profile/ProfileHeader.tsx b/packages/shared/src/components/profile/ProfileHeader.tsx
index 007c87e4bc9..835d404373d 100644
--- a/packages/shared/src/components/profile/ProfileHeader.tsx
+++ b/packages/shared/src/components/profile/ProfileHeader.tsx
@@ -99,7 +99,7 @@ const ProfileHeader = ({
         <div className="flex flex-col gap-2">
           {bio && <Typography type={TypographyType.Body}>{bio}</Typography>}
           <div className="flex items-center">
-            {user?.companies?.length > 0 && (
+            {!!user?.companies?.length && (
               <VerifiedCompanyUserBadge
                 size={ProfileImageSize.XSmall}
                 user={user}
@@ -110,7 +110,7 @@ const ProfileHeader = ({
                 }}
               />
             )}
-            {user?.companies?.length > 0 && user?.location && (
+            {!!user?.companies?.length && user?.location && (
               <Separator className="text-text-secondary" />
             )}
             {user?.location && (
diff --git a/packages/shared/src/components/tags/TagChip.tsx b/packages/shared/src/components/tags/TagChip.tsx
index 1c5c473003b..2998262922f 100644
--- a/packages/shared/src/components/tags/TagChip.tsx
+++ b/packages/shared/src/components/tags/TagChip.tsx
@@ -101,7 +101,11 @@ const TagLabel = ({
       tag={TypographyTag.Link}
       type={type}
       color={TypographyColor.Tertiary}
-      className="cursor-pointer no-underline transition-colors hover:text-text-primary"
+      // `min-w-0 truncate` keeps very long tags (e.g. polyglot
+      // multi-word system labels) inside the chip instead of pushing
+      // the trailing `+` button off-screen. The chip itself can be
+      // capped by callers via `className="max-w-..."`.
+      className="block min-w-0 cursor-pointer truncate no-underline transition-colors hover:text-text-primary"
       title={`Check all #${tag} posts`}
     >
       #{tag}
@@ -123,7 +127,9 @@ export const TagChip = ({
       <span
         role="listitem"
         className={classNames(
-          'inline-flex items-center border border-border-subtlest-tertiary transition-colors hover:bg-border-subtlest-tertiary',
+          // `max-w-full` keeps the chip from breaking out of its
+          // column / flex parent on extremely long tags.
+          'inline-flex max-w-full items-center border border-border-subtlest-tertiary transition-colors hover:bg-border-subtlest-tertiary',
           cfg.height,
           cfg.radius,
           cfg.horizontalPlain,
@@ -141,7 +147,7 @@ export const TagChip = ({
     <span
       role="listitem"
       className={classNames(
-        'inline-flex items-center bg-surface-float',
+        'inline-flex max-w-full items-center bg-surface-float',
         cfg.height,
         cfg.radius,
         showAction ? cfg.horizontalAction : cfg.horizontalPlain,
@@ -155,7 +161,9 @@ export const TagChip = ({
             role="separator"
             aria-hidden
             className={classNames(
-              'mx-2 w-px bg-border-subtlest-tertiary',
+              // `shrink-0` so the separator never collapses when the
+              // label needs to truncate.
+              'mx-2 w-px shrink-0 bg-border-subtlest-tertiary',
               cfg.separatorHeight,
             )}
           />
@@ -163,6 +171,7 @@ export const TagChip = ({
             <ButtonV2
               type="button"
               size={cfg.button}
+              className="shrink-0"
               icon={<PlusIcon aria-hidden size={cfg.icon} />}
               onClick={() => onFollow?.(tag)}
               aria-label={`Follow #${tag}`}
diff --git a/packages/webapp/pages/tags/index.tsx b/packages/webapp/pages/tags/index.tsx
index e569b5ab7e9..ca4329ce37f 100644
--- a/packages/webapp/pages/tags/index.tsx
+++ b/packages/webapp/pages/tags/index.tsx
@@ -15,8 +15,6 @@ import type { GraphQLError } from '@dailydotdev/shared/src/lib/errors';
 import { PageWrapperLayout } from '@dailydotdev/shared/src/components/layout/PageWrapperLayout';
 import { TagTopList } from '@dailydotdev/shared/src/components/cards/Leaderboard';
 import useFeedSettings from '@dailydotdev/shared/src/hooks/useFeedSettings';
-import useTagAndSource from '@dailydotdev/shared/src/hooks/useTagAndSource';
-import { Origin } from '@dailydotdev/shared/src/lib/log';
 import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
 import { getLayout } from '../../components/layouts/MainLayout';
 import { defaultOpenGraph } from '../../next-seo';
@@ -71,9 +69,10 @@ const TagsPage = ({
   const { isFallback: isLoading } = useRouter();
 
   const { feedSettings } = useFeedSettings();
-  const { onFollowTags } = useTagAndSource({
-    origin: Origin.TagsFilter,
-  });
+  // Tags directory stays passive (matches main): chips link out to the
+  // tag page, no inline follow CTA. `isFollowed` still drives the
+  // bordered vs filled chip treatment so logged-in users can scan
+  // their followed tags at a glance.
   const followedSet = useMemo(
     () => new Set(feedSettings?.includeTags || []),
     [feedSettings?.includeTags],
@@ -81,19 +80,20 @@ const TagsPage = ({
 
   const recentlyAddedTags = useMemo(() => {
     return tags
-      ?.sort((a, b) => +new Date(b.createdAt) - +new Date(a.createdAt))
+      ?.slice()
+      .sort((a, b) => +new Date(b.createdAt ?? 0) - +new Date(a.createdAt ?? 0))
       .slice(0, 10);
   }, [tags]);
 
-  const tagsByFirstLetter = useMemo(() => {
-    const filteredTags = tags?.reduce((acc, cur) => {
+  const tagsByFirstLetter = useMemo<Record<string, Keyword[]> | null>(() => {
+    const filteredTags = tags?.reduce<Record<string, Keyword[]>>((acc, cur) => {
       const rawLetter = cur.value[0].toLowerCase();
       const firstLetter: string = new RegExp(/^[a-zA-Z]+$/).test(rawLetter)
         ? rawLetter
         : '#';
       acc[firstLetter] = (acc[firstLetter] || []).concat([cur]);
       return acc;
-    }, []);
+    }, {});
 
     if (!filteredTags) {
       return null;
@@ -101,8 +101,8 @@ const TagsPage = ({
 
     return Object.keys(filteredTags)
       .sort()
-      .reduce((acc, cur) => {
-        acc[cur] = filteredTags[cur].sort((a: Keyword, b: Keyword) => {
+      .reduce<Record<string, Keyword[]>>((acc, cur) => {
+        acc[cur] = filteredTags[cur].slice().sort((a: Keyword, b: Keyword) => {
           if (a.value < b.value) {
             return -1;
           }
@@ -114,7 +114,7 @@ const TagsPage = ({
           return 0;
         });
         return acc;
-      }, []);
+      }, {});
   }, [tags]);
 
   if (isLoading) {
@@ -176,9 +176,6 @@ const TagsPage = ({
                     tag={tag.value}
                     size="md"
                     isFollowed={followedSet.has(tag.value)}
-                    onFollow={(name) =>
-                      onFollowTags({ tags: [name], requireLogin: true })
-                    }
                   />
                 ))}
               </div>
diff --git a/scripts/typecheck-strict-changed.js b/scripts/typecheck-strict-changed.js
index 240c00ac1a3..192b7af542c 100644
--- a/scripts/typecheck-strict-changed.js
+++ b/scripts/typecheck-strict-changed.js
@@ -99,14 +99,6 @@ const strictSkipList = new Set([
   // field has no `types` condition, so strict resolution intermittently fails
   // to find declarations and flags the JSONValue import as implicit any.
   'packages/shared/src/lib/featureManagement.ts',
-  // Buttons-v2 small-fixes branch — these files are touched for tiny scope-1
-  // changes (a `type` -> `variant` prop typo fix and a TagChip swap on the
-  // tags directory). The pre-existing strict violations on unrelated lines
-  // (`user.companies` optionality, `tagsByFirstLetter` reduce accumulator
-  // typed as `never[]`) are unrelated to this PR and should be addressed in
-  // a dedicated cleanup PR.
-  'packages/shared/src/components/profile/ProfileHeader.tsx',
-  'packages/webapp/pages/tags/index.tsx',
 ]);
 
 const changedFiles = getChangedTypescriptFiles().filter(