From 031a6baf8fe175133020a545a1f59190456d8ae2 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Tue, 28 Oct 2025 23:18:15 +0100
Subject: [PATCH 01/16] feat: about me section

---
 .../src/components/ExpandableContent.spec.tsx | 186 ++++++++++++++
 .../src/components/ExpandableContent.tsx      |  84 +++++++
 .../src/components/profile/SocialChips.tsx    | 162 -------------
 .../components/AutofillProfileBanner.tsx      |   2 +-
 .../components/ProfileWidgets/AboutMe.tsx     | 226 ++++++++++++++++++
 .../components/ExpandableContent.stories.tsx  |  63 +++++
 .../features/profile/AboutMe.stories.tsx      | 175 ++++++++++++++
 packages/webapp/pages/[userId]/index.tsx      |   8 +-
 8 files changed, 739 insertions(+), 167 deletions(-)
 create mode 100644 packages/shared/src/components/ExpandableContent.spec.tsx
 create mode 100644 packages/shared/src/components/ExpandableContent.tsx
 delete mode 100644 packages/shared/src/components/profile/SocialChips.tsx
 create mode 100644 packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
 create mode 100644 packages/storybook/stories/components/ExpandableContent.stories.tsx
 create mode 100644 packages/storybook/stories/features/profile/AboutMe.stories.tsx

diff --git a/packages/shared/src/components/ExpandableContent.spec.tsx b/packages/shared/src/components/ExpandableContent.spec.tsx
new file mode 100644
index 0000000000..19f0697b34
--- /dev/null
+++ b/packages/shared/src/components/ExpandableContent.spec.tsx
@@ -0,0 +1,186 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { ExpandableContent } from './ExpandableContent';
+import clearAllMocks = jest.clearAllMocks;
+
+describe('ExpandableContent', () => {
+  const shortContent = <div>Short content that fits</div>;
+  const longContent = (
+    <div>
+      <p>Long content paragraph 1</p>
+      <p>Long content paragraph 2</p>
+      <p>Long content paragraph 3</p>
+      <p>Long content paragraph 4</p>
+      <p>Long content paragraph 5</p>
+      <p>Long content paragraph 6</p>
+      <p>Long content paragraph 7</p>
+      <p>Long content paragraph 8</p>
+      <p>Long content paragraph 9</p>
+      <p>Long content paragraph 10</p>
+    </div>
+  );
+
+  beforeEach(() => {
+    // Reset scrollHeight mock before each test
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 100; // Default value
+      },
+    });
+  });
+
+  afterEach(() => {
+    clearAllMocks();
+  });
+
+  it('should render children content', () => {
+    render(<ExpandableContent>{shortContent}</ExpandableContent>);
+    const elements = screen.getAllByText('Short content that fits');
+    // Should render twice: once hidden for measurement, once visible
+    expect(elements).toHaveLength(2);
+    // At least one should be visible
+    expect(elements[1]).toBeVisible();
+  });
+
+  it('should not show "See More" button when content is short', async () => {
+    // Mock scrollHeight to be less than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 200; // Less than default 320px
+      },
+    });
+
+    render(<ExpandableContent>{shortContent}</ExpandableContent>);
+
+    // Wait a bit for useEffect to run
+    await waitFor(
+      () => {
+        expect(
+          screen.queryByRole('button', { name: /see more/i }),
+        ).not.toBeInTheDocument();
+      },
+      { timeout: 200 },
+    );
+  });
+
+  it('should show "See More" button when content exceeds maxHeight', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500; // More than default 320px
+      },
+    });
+
+    render(<ExpandableContent>{longContent}</ExpandableContent>);
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should expand content when "See More" button is clicked', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+
+    const seeMoreButton = screen.getByRole('button', { name: /see more/i });
+    fireEvent.click(seeMoreButton);
+
+    // Button should disappear after expansion
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: /see more/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should show gradient overlay when content is collapsed', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    // Wait for See More button to appear, which indicates collapsed state
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should hide "See More" button when content is expanded', async () => {
+    // Mock scrollHeight to be more than maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 500;
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={320}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+
+    const seeMoreButton = screen.getByRole('button', { name: /see more/i });
+    fireEvent.click(seeMoreButton);
+
+    // Both button and gradient should be hidden after expansion
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: /see more/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should apply custom maxHeight', async () => {
+    // Mock scrollHeight to exceed custom maxHeight
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return 200; // More than 150px
+      },
+    });
+
+    render(
+      <ExpandableContent maxHeight={150}>{longContent}</ExpandableContent>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /see more/i }),
+      ).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/shared/src/components/ExpandableContent.tsx b/packages/shared/src/components/ExpandableContent.tsx
new file mode 100644
index 0000000000..5a21891390
--- /dev/null
+++ b/packages/shared/src/components/ExpandableContent.tsx
@@ -0,0 +1,84 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from './buttons/Button';
+import { MoveToIcon } from './icons';
+import { IconSize } from './Icon';
+
+export interface ExpandableContentProps {
+  children: ReactNode;
+  maxHeight?: number; // in pixels
+  className?: string;
+}
+
+const DEFAULT_MAX_HEIGHT = 320; // pixels
+
+export function ExpandableContent({
+  children,
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  className,
+}: ExpandableContentProps): ReactElement {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showSeeMore, setShowSeeMore] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (measureRef.current) {
+      const contentHeight = measureRef.current.scrollHeight;
+      setShowSeeMore(contentHeight > maxHeight);
+    }
+  }, [maxHeight]);
+
+  return (
+    <>
+      {/* Hidden div for measuring actual content height */}
+      <div
+        ref={measureRef}
+        className="pointer-events-none invisible absolute"
+        aria-hidden="true"
+      >
+        {children}
+      </div>
+
+      {/* Visible content */}
+      <div
+        ref={contentRef}
+        className={classNames(
+          'relative transition-all duration-500 ease-in-out',
+          {
+            'overflow-hidden': !isExpanded,
+          },
+          className,
+        )}
+        style={{
+          maxHeight: !isExpanded ? `${maxHeight}px` : undefined,
+        }}
+      >
+        {children}
+        {!isExpanded && showSeeMore && (
+          <div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-b from-transparent to-background-default" />
+        )}
+      </div>
+
+      {showSeeMore && !isExpanded && (
+        <div className="mt-4 flex w-full items-center justify-center">
+          <Button
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Medium}
+            onClick={() => setIsExpanded(true)}
+            icon={<MoveToIcon size={IconSize.XSmall} className="rotate-90" />}
+            iconPosition={ButtonIconPosition.Right}
+          >
+            See More
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/shared/src/components/profile/SocialChips.tsx b/packages/shared/src/components/profile/SocialChips.tsx
deleted file mode 100644
index e390f3b37f..0000000000
--- a/packages/shared/src/components/profile/SocialChips.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import {
-  GitHubIcon,
-  TwitterIcon,
-  LinkIcon,
-  LinkedInIcon,
-  YoutubeIcon,
-  StackOverflowIcon,
-  RedditIcon,
-  RoadmapIcon,
-  MastodonIcon,
-  BlueskyIcon,
-  ThreadsIcon,
-  CodePenIcon,
-} from '../icons';
-import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
-import { withHttps, withoutProtocol } from '../../lib/links';
-import { useLogContext } from '../../contexts/LogContext';
-import { combinedClicks } from '../../lib/click';
-import { LogEvent, TargetType } from '../../lib/log';
-
-export interface SocialChipsProps {
-  links: {
-    github?: string;
-    twitter?: string;
-    portfolio?: string;
-    roadmap?: string;
-    threads?: string;
-    codepen?: string;
-    reddit?: string;
-    stackoverflow?: string;
-    youtube?: string;
-    linkedin?: string;
-    mastodon?: string;
-    bluesky?: string;
-  };
-}
-
-const handlers: Record<
-  keyof SocialChipsProps['links'],
-  {
-    icon: ReactElement;
-    href: (x: string) => string;
-    label: (x: string) => string;
-  }
-> = {
-  github: {
-    icon: <GitHubIcon />,
-    href: (x) => `https://github.com/${x}`,
-    label: (x) => `@${x}`,
-  },
-  twitter: {
-    icon: <TwitterIcon />,
-    href: (x) => `https://x.com/${x}`,
-    label: (x) => `@${x}`,
-  },
-  portfolio: {
-    icon: <LinkIcon />,
-    href: (x) => withHttps(x),
-    // Strip protocol from url
-    label: (x) => withoutProtocol(x),
-  },
-  linkedin: {
-    icon: <LinkedInIcon />,
-    href: (x) => `https://linkedin.com/in/${x}`,
-    label: (x) => x,
-  },
-  youtube: {
-    icon: <YoutubeIcon />,
-    href: (x) => `https://youtube.com/@${x}`,
-    label: (x) => `@${x}`,
-  },
-  stackoverflow: {
-    icon: <StackOverflowIcon />,
-    href: (x) => `https://stackoverflow.com/users/${x}`,
-    label: (x) => x.split('/')[1] || x,
-  },
-  reddit: {
-    icon: <RedditIcon />,
-    href: (x) => `https://reddit.com/user/${x}`,
-    label: (x) => `u/${x}`,
-  },
-  roadmap: {
-    icon: <RoadmapIcon />,
-    href: (x) => `https://roadmap.sh/u/${x}`,
-    label: (x) => x,
-  },
-  mastodon: {
-    icon: <MastodonIcon />,
-    href: (x) => x,
-    label: (x) => withoutProtocol(x),
-  },
-  bluesky: {
-    icon: <BlueskyIcon />,
-    href: (x) => `https://bsky.app/profile/${x}`,
-    label: (x) => x,
-  },
-  threads: {
-    icon: <ThreadsIcon />,
-    href: (x) => `https://threads.net/@${x}`,
-    label: (x) => `@${x}`,
-  },
-  codepen: {
-    icon: <CodePenIcon />,
-    href: (x) => `https://codepen.io/${x}`,
-    label: (x) => x,
-  },
-};
-const order: (keyof SocialChipsProps['links'])[] = [
-  'github',
-  'linkedin',
-  'portfolio',
-  'twitter',
-  'youtube',
-  'stackoverflow',
-  'reddit',
-  'roadmap',
-  'codepen',
-  'mastodon',
-  'bluesky',
-  'threads',
-];
-
-export function SocialChips({ links }: SocialChipsProps): ReactElement {
-  const { logEvent } = useLogContext();
-
-  const elements = order
-    .filter((key) => !!links[key])
-    .map((key) => (
-      <Button
-        icon={handlers[key].icon}
-        size={ButtonSize.Small}
-        variant={ButtonVariant.Subtle}
-        tag="a"
-        target="_blank"
-        rel="noopener"
-        href={handlers[key].href(links[key])}
-        key={key}
-        data-testid={key}
-        {...combinedClicks(() => {
-          logEvent({
-            event_name: LogEvent.Click,
-            target_type: TargetType.SocialLink,
-            target_id: key,
-          });
-        })}
-      >
-        {handlers[key].label(links[key])}
-      </Button>
-    ));
-
-  if (!elements.length) {
-    return <></>;
-  }
-
-  return (
-    <div className="no-scrollbar flex items-center gap-2 overflow-x-auto px-4 laptop:flex-wrap">
-      {elements}
-    </div>
-  );
-}
diff --git a/packages/shared/src/features/profile/components/AutofillProfileBanner.tsx b/packages/shared/src/features/profile/components/AutofillProfileBanner.tsx
index 54bbb70794..ca3950a62c 100644
--- a/packages/shared/src/features/profile/components/AutofillProfileBanner.tsx
+++ b/packages/shared/src/features/profile/components/AutofillProfileBanner.tsx
@@ -75,7 +75,7 @@ export function AutofillProfileBanner({
   return (
     <div
       style={{ background: cvUploadBannerBg }}
-      className="relative mx-auto my-3 flex w-full flex-col items-center justify-center overflow-hidden rounded-10 border border-border-subtlest-tertiary p-4 laptop:flex-row"
+      className="relative mx-auto my-4 flex w-full flex-col items-center justify-center overflow-hidden rounded-10 border border-border-subtlest-tertiary p-4 laptop:flex-row"
     >
       {input}
       <div className="flex flex-1 flex-col items-center gap-1 laptop:items-baseline">
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
new file mode 100644
index 0000000000..2512083ec2
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
@@ -0,0 +1,226 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import type { PublicProfile } from '../../../../lib/user';
+import Markdown from '../../../../components/Markdown';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import {
+  BlueskyIcon,
+  CodePenIcon,
+  CopyIcon,
+  GitHubIcon,
+  LinkedInIcon,
+  LinkIcon,
+  MastodonIcon,
+  RedditIcon,
+  RoadmapIcon,
+  StackOverflowIcon,
+  ThreadsIcon,
+  TwitterIcon,
+  YoutubeIcon,
+} from '../../../../components/icons';
+import { IconSize } from '../../../../components/Icon';
+import { useCopyLink } from '../../../../hooks/useCopy';
+import { SimpleTooltip } from '../../../../components/tooltips/SimpleTooltip';
+import { ExpandableContent } from '../../../../components/ExpandableContent';
+import { useLogContext } from '../../../../contexts/LogContext';
+import { combinedClicks } from '../../../../lib/click';
+import { LogEvent, TargetType } from '../../../../lib/log';
+
+export interface AboutMeProps {
+  user: PublicProfile;
+  className?: string;
+}
+
+const MAX_VISIBLE_LINKS = 3;
+
+interface SocialLink {
+  id: string;
+  url: string;
+  icon: ReactElement;
+  label: string;
+}
+
+export function AboutMe({
+  user,
+  className,
+}: AboutMeProps): ReactElement | null {
+  const [showAllLinks, setShowAllLinks] = useState(false);
+  const readme = user?.readmeHtml;
+  const [, copyLink] = useCopyLink();
+  const { logEvent } = useLogContext();
+
+  // Markdown is supported only in the client due to sanitization
+  const isClient = typeof window !== 'undefined';
+
+  // Memoize social links to avoid recalculating on every render
+  const socialLinks = useMemo(() => {
+    return [
+      user.github && {
+        id: 'github',
+        url: `https://github.com/${user.github}`,
+        icon: <GitHubIcon size={IconSize.XSmall} />,
+        label: 'GitHub',
+      },
+      user.linkedin && {
+        id: 'linkedin',
+        url: user.linkedin,
+        icon: <LinkedInIcon size={IconSize.XSmall} />,
+        label: 'LinkedIn',
+      },
+      user.portfolio && {
+        id: 'portfolio',
+        url: user.portfolio,
+        icon: <LinkIcon size={IconSize.XSmall} />,
+        label: 'Portfolio',
+      },
+      user.twitter && {
+        id: 'twitter',
+        url: `https://x.com/${user.twitter}`,
+        icon: <TwitterIcon size={IconSize.XSmall} />,
+        label: 'Twitter',
+      },
+      user.youtube && {
+        id: 'youtube',
+        url: `https://youtube.com/@${user.youtube}`,
+        icon: <YoutubeIcon size={IconSize.XSmall} />,
+        label: 'YouTube',
+      },
+      user.stackoverflow && {
+        id: 'stackoverflow',
+        url: `https://stackoverflow.com/users/${user.stackoverflow}`,
+        icon: <StackOverflowIcon size={IconSize.XSmall} />,
+        label: 'Stack Overflow',
+      },
+      user.reddit && {
+        id: 'reddit',
+        url: `https://reddit.com/user/${user.reddit}`,
+        icon: <RedditIcon size={IconSize.XSmall} />,
+        label: 'Reddit',
+      },
+      user.roadmap && {
+        id: 'roadmap',
+        url: `https://roadmap.sh/u/${user.roadmap}`,
+        icon: <RoadmapIcon size={IconSize.XSmall} />,
+        label: 'Roadmap.sh',
+      },
+      user.codepen && {
+        id: 'codepen',
+        url: `https://codepen.io/${user.codepen}`,
+        icon: <CodePenIcon size={IconSize.XSmall} />,
+        label: 'CodePen',
+      },
+      user.mastodon && {
+        id: 'mastodon',
+        url: user.mastodon,
+        icon: <MastodonIcon size={IconSize.XSmall} />,
+        label: 'Mastodon',
+      },
+      user.bluesky && {
+        id: 'bluesky',
+        url: `https://bsky.app/profile/${user.bluesky}`,
+        icon: <BlueskyIcon size={IconSize.XSmall} />,
+        label: 'Bluesky',
+      },
+      user.threads && {
+        id: 'threads',
+        url: `https://threads.net/@${user.threads}`,
+        icon: <ThreadsIcon size={IconSize.XSmall} />,
+        label: 'Threads',
+      },
+    ].filter(Boolean) as SocialLink[];
+  }, [user]);
+
+  const visibleLinks = showAllLinks
+    ? socialLinks
+    : socialLinks.slice(0, MAX_VISIBLE_LINKS);
+  const hasMoreLinks = socialLinks.length > MAX_VISIBLE_LINKS;
+
+  if (!readme || !isClient) {
+    return null;
+  }
+
+  return (
+    <div className={classNames('py-4', className)}>
+      <ExpandableContent maxHeight={320}>
+        <div className="flex flex-col gap-4">
+          <Typography
+            type={TypographyType.Body}
+            color={TypographyColor.Primary}
+            bold
+          >
+            About me
+          </Typography>
+
+          <div className="flex flex-1 flex-col gap-4">
+            <div className="flex flex-wrap items-center gap-2">
+              <SimpleTooltip content="Copy profile link">
+                <Button
+                  variant={ButtonVariant.Subtle}
+                  size={ButtonSize.Small}
+                  onClick={() => copyLink({ link: user.permalink })}
+                  icon={<CopyIcon size={IconSize.XSmall} />}
+                  aria-label="Copy profile link"
+                  data-testid="copy-profile-link"
+                  {...combinedClicks(() => {
+                    logEvent({
+                      event_name: LogEvent.Click,
+                      target_type: TargetType.ProfilePage,
+                      target_id: 'copy_profile_link',
+                    });
+                  })}
+                />
+              </SimpleTooltip>
+              {visibleLinks.map((link) => (
+                <SimpleTooltip key={link.id} content={link.label}>
+                  <Button
+                    variant={ButtonVariant.Subtle}
+                    size={ButtonSize.Small}
+                    tag="a"
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener"
+                    icon={link.icon}
+                    aria-label={link.label}
+                    data-testid={`social-link-${link.id}`}
+                    {...combinedClicks(() => {
+                      logEvent({
+                        event_name: LogEvent.Click,
+                        target_type: TargetType.SocialLink,
+                        target_id: link.id,
+                      });
+                    })}
+                  />
+                </SimpleTooltip>
+              ))}
+              {hasMoreLinks && !showAllLinks && (
+                <SimpleTooltip content="Show all links">
+                  <Button
+                    variant={ButtonVariant.Subtle}
+                    size={ButtonSize.Small}
+                    onClick={() => setShowAllLinks(true)}
+                    data-testid="show-all-links"
+                  >
+                    +{socialLinks.length - MAX_VISIBLE_LINKS}
+                  </Button>
+                </SimpleTooltip>
+              )}
+            </div>
+            <div>
+              <Markdown content={readme} />
+            </div>
+          </div>
+        </div>
+      </ExpandableContent>
+    </div>
+  );
+}
diff --git a/packages/storybook/stories/components/ExpandableContent.stories.tsx b/packages/storybook/stories/components/ExpandableContent.stories.tsx
new file mode 100644
index 0000000000..170fa30afb
--- /dev/null
+++ b/packages/storybook/stories/components/ExpandableContent.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ExpandableContent } from '@dailydotdev/shared/src/components/ExpandableContent';
+
+const meta: Meta<typeof ExpandableContent> = {
+  title: 'Components/ExpandableContent',
+  component: ExpandableContent,
+  tags: ['autodocs'],
+  argTypes: {
+    maxHeight: {
+      control: { type: 'number', min: 100, max: 800, step: 10 },
+      description: 'Maximum height in pixels before showing "See More" button',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ExpandableContent>;
+
+const ContentWithImages = () => (
+  <div>
+    <h2 className="mb-4 text-2xl font-bold">Content with Images</h2>
+    <p className="mb-4">
+      This content includes images that should be properly handled by the
+      component's height detection.
+    </p>
+    <img
+      src="https://picsum.photos/400/300"
+      alt="Random placeholder"
+      className="mb-4 w-full rounded-lg"
+    />
+    <p className="mb-4">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. The image above
+      should be included in the height calculation to properly show or hide the
+      "See More" button.
+    </p>
+    <img
+      src="https://picsum.photos/400/200"
+      alt="Another placeholder"
+      className="mb-4 w-full rounded-lg"
+    />
+    <p className="mb-4">
+      More content below the second image to ensure the total height exceeds the
+      maximum and triggers the expandable behavior.
+    </p>
+  </div>
+);
+
+export const WithImages: Story = {
+  args: {
+    maxHeight: 320,
+  },
+  render: (args) => (
+    <ExpandableContent {...args}>
+      <ContentWithImages />
+    </ExpandableContent>
+  ),
+};
diff --git a/packages/storybook/stories/features/profile/AboutMe.stories.tsx b/packages/storybook/stories/features/profile/AboutMe.stories.tsx
new file mode 100644
index 0000000000..3b7640d732
--- /dev/null
+++ b/packages/storybook/stories/features/profile/AboutMe.stories.tsx
@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AboutMe } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/AboutMe';
+import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import { fn } from 'storybook/test';
+
+const meta: Meta<typeof AboutMe> = {
+  title: 'Features/Profile/AboutMe',
+  component: AboutMe,
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: Infinity,
+          },
+        },
+      });
+
+      const LogContext = getLogContextStatic();
+
+      const mockUser = {
+        id: '1',
+        name: 'Test User',
+        username: 'testuser',
+        email: 'test@example.com',
+        image:
+          'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
+        providers: ['google'],
+      };
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <AuthContext.Provider
+            value={{
+              user: mockUser,
+              shouldShowLogin: false,
+              showLogin: fn(),
+              logout: fn(),
+              updateUser: fn(),
+              tokenRefreshed: true,
+              getRedirectUri: fn(),
+              loadingUser: false,
+              loadedUserFromCache: true,
+              refetchBoot: fn(),
+              squads: [],
+              isAndroidApp: false,
+            }}
+          >
+            <LogContext.Provider
+              value={{
+                logEvent: fn(),
+                logEventStart: fn(),
+                logEventEnd: fn(),
+                sendBeacon: fn(),
+              }}
+            >
+              <div className="max-w-[800px]">
+                <Story />
+              </div>
+            </LogContext.Provider>
+          </AuthContext.Provider>
+        </QueryClientProvider>
+      );
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AboutMe>;
+
+const shortContent = `
+# Here to break production
+
+Yes I do love to break production 🙈
+
+I'm a passionate developer who enjoys learning new technologies and building great products.
+`;
+
+const longContent = `
+# Here to break production
+
+Yes I do love to break production 🙈
+
+I'm a passionate developer who enjoys learning new technologies and building great products. I have over 10 years of experience in software development, working with various technologies and frameworks.
+
+## My Journey
+
+Started my journey as a junior developer and worked my way up through various roles. I've worked on:
+
+- Large-scale web applications
+- Mobile apps
+- Cloud infrastructure
+- DevOps and CI/CD pipelines
+
+## Technologies I Love
+
+I'm particularly interested in:
+
+- React and Next.js
+- TypeScript
+- Node.js
+- GraphQL
+- PostgreSQL
+- Docker and Kubernetes
+
+![Development Setup](https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&h=400&fit=crop)
+
+## What Drives Me
+
+I believe in writing clean, maintainable code and sharing knowledge with the community. When I'm not coding, you can find me:
+
+- Contributing to open source projects
+- Writing technical blog posts
+- Attending tech conferences
+- Mentoring junior developers
+
+Feel free to reach out if you want to collaborate on something exciting!
+`;
+
+export const Default: Story = {
+  args: {
+    user: {
+      id: '1',
+      username: 'testuser',
+      name: 'Test User',
+      image:
+        'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
+      readmeHtml: shortContent,
+    },
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    user: {
+      id: '1',
+      username: 'testuser',
+      name: 'Test User',
+      image:
+        'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
+      readmeHtml: longContent,
+    },
+  },
+};
+
+export const EmptyStateOwnProfile: Story = {
+  args: {
+    user: {
+      id: '1',
+      username: 'testuser',
+      name: 'Test User',
+      image:
+        'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
+      readmeHtml: undefined,
+    },
+  },
+};
+
+export const EmptyStateOtherProfile: Story = {
+  args: {
+    user: {
+      id: '2',
+      username: 'otheruser',
+      name: 'Other User',
+      image:
+        'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
+      readmeHtml: undefined,
+    },
+  },
+};
diff --git a/packages/webapp/pages/[userId]/index.tsx b/packages/webapp/pages/[userId]/index.tsx
index 5ec5d499fc..9269e648ed 100644
--- a/packages/webapp/pages/[userId]/index.tsx
+++ b/packages/webapp/pages/[userId]/index.tsx
@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
-import { Readme } from '@dailydotdev/shared/src/components/profile/Readme';
+import { AboutMe } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/AboutMe';
 import { useProfile } from '@dailydotdev/shared/src/hooks/profile/useProfile';
 import { useActions, useJoinReferral } from '@dailydotdev/shared/src/hooks';
 import { NextSeo } from 'next-seo';
@@ -72,18 +72,18 @@ const ProfilePage = ({
       )}
       <div ref={stickyRef} />
       <ProfileHeader user={user} userStats={userStats} />
-      <div className="flex flex-col gap-6 p-6">
+      <div className="flex flex-col divide-y divide-border-subtlest-tertiary p-6">
         {shouldShowBanner && (
           <AutofillProfileBanner
             onUpload={onUpload}
             isLoading={status === 'pending'}
           />
         )}
-        <Readme user={user} />
+        <AboutMe user={user} />
         {isUserSame && (
           <Share permalink={user?.permalink} className="laptop:hidden" />
         )}
-        <div>
+        <div className="py-4">
           <Typography
             type={TypographyType.Body}
             tag={TypographyTag.H1}

From ae9b518bdf2d7b793671be00e2fdc37e033a8b34 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Wed, 29 Oct 2025 09:38:18 +0100
Subject: [PATCH 02/16] fix: add tests and remove unused files

---
 .../shared/src/components/profile/Readme.tsx  | 122 ------------
 .../ProfileWidgets/AboutMe.spec.tsx           | 169 +++++++++++++++++
 .../components/ProfileWidgets/AboutMe.tsx     | 110 +++++------
 .../src/hooks/profile/useProfileReadme.ts     |  74 --------
 .../features/profile/AboutMe.stories.tsx      | 175 ------------------
 .../webapp/__tests__/ProfileIndexPage.tsx     |  18 +-
 6 files changed, 234 insertions(+), 434 deletions(-)
 delete mode 100644 packages/shared/src/components/profile/Readme.tsx
 create mode 100644 packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
 delete mode 100644 packages/shared/src/hooks/profile/useProfileReadme.ts
 delete mode 100644 packages/storybook/stories/features/profile/AboutMe.stories.tsx

diff --git a/packages/shared/src/components/profile/Readme.tsx b/packages/shared/src/components/profile/Readme.tsx
deleted file mode 100644
index 4c6860f57f..0000000000
--- a/packages/shared/src/components/profile/Readme.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { FormEventHandler, ReactElement } from 'react';
-import React, { useContext } from 'react';
-import type { PublicProfile } from '../../lib/user';
-import AuthContext from '../../contexts/AuthContext';
-import { MyProfileEmptyScreen } from './MyProfileEmptyScreen';
-import Markdown from '../Markdown';
-import MarkdownInput from '../fields/MarkdownInput';
-import { formToJson } from '../../lib/form';
-import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
-import { useProfileReadme } from '../../hooks/profile/useProfileReadme';
-
-export interface ReadmeProps {
-  user: PublicProfile;
-}
-
-function ReadonlyReadme({
-  isSameUser,
-  readme,
-  onClick,
-}: {
-  isSameUser: boolean;
-  readme?: string;
-  onClick: () => unknown;
-}): ReactElement {
-  // Markdown is supported only in the client due to sanitization
-  const isClient = typeof window !== 'undefined';
-
-  if (!isClient) {
-    return <></>;
-  }
-
-  return (
-    <>
-      {isSameUser && (
-        <Button
-          variant={ButtonVariant.Secondary}
-          size={ButtonSize.Small}
-          onClick={onClick}
-          className="self-start"
-        >
-          Edit readme
-        </Button>
-      )}
-      <Markdown content={readme} />
-    </>
-  );
-}
-
-function EditableReadme({
-  readme,
-  updateReadme,
-  isLoading,
-}: {
-  readme: string;
-  updateReadme: (content: string) => unknown;
-  isLoading: boolean;
-}): ReactElement {
-  const onSubmitForm: FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault();
-    const { content } = formToJson<{ content: string }>(e.currentTarget);
-    return updateReadme(content);
-  };
-
-  return (
-    <form action="#" className="flex flex-col" onSubmit={onSubmitForm}>
-      <MarkdownInput
-        textareaProps={{
-          name: 'content',
-          rows: 7,
-        }}
-        initialContent={readme}
-        enabledCommand={{ upload: true, link: true, mention: false }}
-        submitCopy="Done"
-        showMarkdownGuide
-        onSubmit={(e) => updateReadme(e.currentTarget.value)}
-        isLoading={isLoading}
-      />
-    </form>
-  );
-}
-
-export function Readme({ user }: ReadmeProps): ReactElement {
-  const { user: loggedUser } = useContext(AuthContext);
-  const isSameUser = loggedUser?.id === user.id;
-  const readme = user?.readmeHtml;
-
-  const {
-    readme: mdReadme,
-    updateReadme,
-    isLoadingReadme,
-    editMode,
-    setEditMode,
-    submitting,
-  } = useProfileReadme(user);
-
-  if (editMode) {
-    return (
-      <EditableReadme
-        readme={mdReadme}
-        updateReadme={updateReadme}
-        isLoading={isLoadingReadme || submitting}
-      />
-    );
-  }
-  if (!readme && isSameUser) {
-    return (
-      <MyProfileEmptyScreen
-        className="items-start"
-        text="Do you love breaking production? Share with the world what has brought you so far"
-        cta="Add readme"
-        buttonProps={{ onClick: () => setEditMode(true) }}
-      />
-    );
-  }
-  return (
-    <ReadonlyReadme
-      isSameUser={isSameUser}
-      onClick={() => setEditMode(true)}
-      readme={readme}
-    />
-  );
-}
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
new file mode 100644
index 0000000000..d3b4604221
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { PublicProfile } from '../../../../lib/user';
+import { AboutMe } from './AboutMe';
+import { getLogContextStatic } from '../../../../contexts/LogContext';
+
+const LogContext = getLogContextStatic();
+
+const mockCopyLink = jest.fn();
+const mockLogEvent = jest.fn();
+
+// Mock useCopyLink hook
+jest.mock('../../../../hooks/useCopy', () => ({
+  useCopyLink: () => [jest.fn(), mockCopyLink],
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  // Mock window for client-side check
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1024,
+  });
+});
+
+const baseUser: PublicProfile = {
+  id: 'u1',
+  name: 'Test User',
+  username: 'testuser',
+  image: 'https://daily.dev/user.png',
+  permalink: 'https://daily.dev/testuser',
+  reputation: 100,
+  createdAt: '2020-01-01T00:00:00.000Z',
+  premium: false,
+};
+
+const userWithReadme: PublicProfile = {
+  ...baseUser,
+  readmeHtml: 'This is my awesome bio with some **markdown**!',
+};
+
+const userWithSocialLinks: PublicProfile = {
+  ...userWithReadme,
+  twitter: 'testuser',
+  github: 'testuser',
+  linkedin: 'https://linkedin.com/in/testuser',
+  portfolio: 'https://testuser.com',
+  youtube: 'testuser',
+  stackoverflow: '123456/testuser',
+  reddit: 'testuser',
+  roadmap: 'testuser',
+  codepen: 'testuser',
+  mastodon: 'https://mastodon.social/@testuser',
+  bluesky: 'testuser.bsky.social',
+  threads: 'testuser',
+};
+
+const renderComponent = (user: Partial<PublicProfile> = {}) => {
+  const mergedUser = { ...baseUser, ...user };
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <LogContext.Provider
+        value={{
+          logEvent: mockLogEvent,
+          logEventStart: jest.fn(),
+          logEventEnd: jest.fn(),
+          sendBeacon: jest.fn(),
+        }}
+      >
+        <AboutMe user={mergedUser} />
+      </LogContext.Provider>
+    </QueryClientProvider>,
+  );
+};
+
+describe('AboutMe', () => {
+  describe('Rendering', () => {
+    it('should not render when both readme and social links are not present', () => {
+      const { container } = renderComponent();
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should render when readme is present', () => {
+      renderComponent(userWithReadme);
+      expect(screen.getAllByText('About me')[0]).toBeInTheDocument();
+      expect(
+        screen.getAllByText(
+          'This is my awesome bio with some **markdown**!',
+        )[0],
+      ).toBeInTheDocument();
+    });
+
+    it('should render with social links when user has them', () => {
+      renderComponent(userWithSocialLinks);
+      expect(
+        screen.getAllByTestId('social-link-github')[0],
+      ).toBeInTheDocument();
+      expect(
+        screen.getAllByTestId('social-link-linkedin')[0],
+      ).toBeInTheDocument();
+      expect(
+        screen.getAllByTestId('social-link-portfolio')[0],
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Social Links', () => {
+    it('should show only first 3 social links initially', () => {
+      renderComponent(userWithSocialLinks);
+      // Each link appears twice (measurement + visible), so we check the first half
+      const allLinks = screen.getAllByTestId(/^social-link-/);
+      const visibleLinks = allLinks.slice(0, allLinks.length / 2);
+      expect(visibleLinks.length).toBe(3);
+    });
+
+    it('should show "+N" button when more than 3 links', () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButtons = screen.getAllByTestId('show-all-links');
+      expect(showAllButtons[0]).toBeInTheDocument();
+      // 12 total links - 3 visible = 9 more
+      expect(showAllButtons[0]).toHaveTextContent('+9');
+    });
+
+    it('should show all links when "+N" button is clicked', async () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButton = screen.getAllByTestId('show-all-links')[0];
+      fireEvent.click(showAllButton);
+
+      await waitFor(() => {
+        const allLinks = screen.getAllByTestId(/^social-link-/);
+        const visibleLinks = allLinks.slice(0, allLinks.length / 2);
+        expect(visibleLinks.length).toBe(12); // All 12 social links
+      });
+    });
+
+    it('should hide "+N" button after showing all links', async () => {
+      renderComponent(userWithSocialLinks);
+      const showAllButton = screen.getAllByTestId('show-all-links')[0];
+      fireEvent.click(showAllButton);
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('show-all-links')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Analytics', () => {
+    it('should log click event for social links', () => {
+      renderComponent(userWithSocialLinks);
+      const githubLink = screen.getAllByTestId('social-link-github')[0];
+      fireEvent.click(githubLink);
+
+      expect(mockLogEvent).toHaveBeenCalledWith({
+        event_name: 'click',
+        target_type: 'social link',
+        target_id: 'github',
+      });
+    });
+  });
+});
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
index 2512083ec2..29fbb20180 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
@@ -16,7 +16,6 @@ import {
 import {
   BlueskyIcon,
   CodePenIcon,
-  CopyIcon,
   GitHubIcon,
   LinkedInIcon,
   LinkIcon,
@@ -29,12 +28,12 @@ import {
   YoutubeIcon,
 } from '../../../../components/icons';
 import { IconSize } from '../../../../components/Icon';
-import { useCopyLink } from '../../../../hooks/useCopy';
 import { SimpleTooltip } from '../../../../components/tooltips/SimpleTooltip';
 import { ExpandableContent } from '../../../../components/ExpandableContent';
 import { useLogContext } from '../../../../contexts/LogContext';
 import { combinedClicks } from '../../../../lib/click';
 import { LogEvent, TargetType } from '../../../../lib/log';
+import { anchorDefaultRel } from '../../../../lib/strings';
 
 export interface AboutMeProps {
   user: PublicProfile;
@@ -56,13 +55,11 @@ export function AboutMe({
 }: AboutMeProps): ReactElement | null {
   const [showAllLinks, setShowAllLinks] = useState(false);
   const readme = user?.readmeHtml;
-  const [, copyLink] = useCopyLink();
   const { logEvent } = useLogContext();
 
   // Markdown is supported only in the client due to sanitization
   const isClient = typeof window !== 'undefined';
 
-  // Memoize social links to avoid recalculating on every render
   const socialLinks = useMemo(() => {
     return [
       user.github && {
@@ -145,7 +142,10 @@ export function AboutMe({
     : socialLinks.slice(0, MAX_VISIBLE_LINKS);
   const hasMoreLinks = socialLinks.length > MAX_VISIBLE_LINKS;
 
-  if (!readme || !isClient) {
+  const shouldShowReadme = readme && isClient;
+  const shouldShowSocialLinks = socialLinks.length > 0;
+
+  if (!shouldShowReadme && !shouldShowSocialLinks) {
     return null;
   }
 
@@ -162,62 +162,50 @@ export function AboutMe({
           </Typography>
 
           <div className="flex flex-1 flex-col gap-4">
-            <div className="flex flex-wrap items-center gap-2">
-              <SimpleTooltip content="Copy profile link">
-                <Button
-                  variant={ButtonVariant.Subtle}
-                  size={ButtonSize.Small}
-                  onClick={() => copyLink({ link: user.permalink })}
-                  icon={<CopyIcon size={IconSize.XSmall} />}
-                  aria-label="Copy profile link"
-                  data-testid="copy-profile-link"
-                  {...combinedClicks(() => {
-                    logEvent({
-                      event_name: LogEvent.Click,
-                      target_type: TargetType.ProfilePage,
-                      target_id: 'copy_profile_link',
-                    });
-                  })}
-                />
-              </SimpleTooltip>
-              {visibleLinks.map((link) => (
-                <SimpleTooltip key={link.id} content={link.label}>
-                  <Button
-                    variant={ButtonVariant.Subtle}
-                    size={ButtonSize.Small}
-                    tag="a"
-                    href={link.url}
-                    target="_blank"
-                    rel="noopener"
-                    icon={link.icon}
-                    aria-label={link.label}
-                    data-testid={`social-link-${link.id}`}
-                    {...combinedClicks(() => {
-                      logEvent({
-                        event_name: LogEvent.Click,
-                        target_type: TargetType.SocialLink,
-                        target_id: link.id,
-                      });
-                    })}
-                  />
-                </SimpleTooltip>
-              ))}
-              {hasMoreLinks && !showAllLinks && (
-                <SimpleTooltip content="Show all links">
-                  <Button
-                    variant={ButtonVariant.Subtle}
-                    size={ButtonSize.Small}
-                    onClick={() => setShowAllLinks(true)}
-                    data-testid="show-all-links"
-                  >
-                    +{socialLinks.length - MAX_VISIBLE_LINKS}
-                  </Button>
-                </SimpleTooltip>
-              )}
-            </div>
-            <div>
-              <Markdown content={readme} />
-            </div>
+            {shouldShowSocialLinks && (
+              <div className="flex flex-wrap items-center gap-2">
+                {visibleLinks.map((link) => (
+                  <SimpleTooltip key={link.id} content={link.label}>
+                    <Button
+                      variant={ButtonVariant.Subtle}
+                      size={ButtonSize.Small}
+                      tag="a"
+                      href={link.url}
+                      target="_blank"
+                      rel={anchorDefaultRel}
+                      icon={link.icon}
+                      aria-label={link.label}
+                      data-testid={`social-link-${link.id}`}
+                      {...combinedClicks(() => {
+                        logEvent({
+                          event_name: LogEvent.Click,
+                          target_type: TargetType.SocialLink,
+                          target_id: link.id,
+                        });
+                      })}
+                    />
+                  </SimpleTooltip>
+                ))}
+                {hasMoreLinks && !showAllLinks && (
+                  <SimpleTooltip content="Show all links">
+                    <Button
+                      variant={ButtonVariant.Subtle}
+                      size={ButtonSize.Small}
+                      onClick={() => setShowAllLinks(true)}
+                      data-testid="show-all-links"
+                    >
+                      +{socialLinks.length - MAX_VISIBLE_LINKS}
+                    </Button>
+                  </SimpleTooltip>
+                )}
+              </div>
+            )}
+
+            {shouldShowReadme && (
+              <div>
+                <Markdown content={readme} />
+              </div>
+            )}
           </div>
         </div>
       </ExpandableContent>
diff --git a/packages/shared/src/hooks/profile/useProfileReadme.ts b/packages/shared/src/hooks/profile/useProfileReadme.ts
deleted file mode 100644
index 6fee85d688..0000000000
--- a/packages/shared/src/hooks/profile/useProfileReadme.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import type { ClientError } from 'graphql-request';
-import { useState } from 'react';
-import { generateQueryKey, RequestKey } from '../../lib/query';
-import { UPDATE_README_MUTATION, USER_README_QUERY } from '../../graphql/users';
-import type { PublicProfile } from '../../lib/user';
-import { useToastNotification } from '../useToastNotification';
-import { gqlClient } from '../../graphql/common';
-
-export type UseProfileReadmeRet = {
-  readme?: string;
-  isLoadingReadme: boolean;
-  editMode: boolean;
-  setEditMode: (editMode: boolean) => void;
-  updateReadme: (content: string) => Promise<unknown>;
-  submitting: boolean;
-};
-
-export function useProfileReadme(user: PublicProfile): UseProfileReadmeRet {
-  const { displayToast } = useToastNotification();
-  const client = useQueryClient();
-  const [editMode, setEditMode] = useState(false);
-
-  const queryKey = generateQueryKey(RequestKey.Readme, user);
-  const { data: remoteReadme, isLoading } = useQuery<{
-    user: { readme: string };
-  }>({
-    queryKey,
-    queryFn: () =>
-      gqlClient.request(USER_README_QUERY, {
-        id: user.id,
-      }),
-    enabled: editMode,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    refetchOnMount: false,
-  });
-
-  const { mutateAsync: updateReadme, isPending: submitting } = useMutation<
-    { updateReadme: { readmeHtml: string } },
-    unknown,
-    string
-  >({
-    mutationFn: (content) =>
-      gqlClient.request(UPDATE_README_MUTATION, { content }),
-
-    onSuccess: async () => {
-      setEditMode(false);
-      await client.invalidateQueries({ queryKey });
-      await client.invalidateQueries({
-        queryKey: generateQueryKey(RequestKey.Profile, user),
-      });
-    },
-
-    onError: (err) => {
-      const clientError = err as ClientError;
-      const message = clientError?.response?.errors?.[0]?.message;
-      if (!message) {
-        return;
-      }
-
-      displayToast(message);
-    },
-  });
-
-  return {
-    readme: remoteReadme?.user.readme,
-    isLoadingReadme: isLoading,
-    editMode,
-    setEditMode,
-    updateReadme,
-    submitting,
-  };
-}
diff --git a/packages/storybook/stories/features/profile/AboutMe.stories.tsx b/packages/storybook/stories/features/profile/AboutMe.stories.tsx
deleted file mode 100644
index 3b7640d732..0000000000
--- a/packages/storybook/stories/features/profile/AboutMe.stories.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { AboutMe } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/AboutMe';
-import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
-import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
-import { fn } from 'storybook/test';
-
-const meta: Meta<typeof AboutMe> = {
-  title: 'Features/Profile/AboutMe',
-  component: AboutMe,
-  decorators: [
-    (Story) => {
-      const queryClient = new QueryClient({
-        defaultOptions: {
-          queries: {
-            retry: false,
-            staleTime: Infinity,
-          },
-        },
-      });
-
-      const LogContext = getLogContextStatic();
-
-      const mockUser = {
-        id: '1',
-        name: 'Test User',
-        username: 'testuser',
-        email: 'test@example.com',
-        image:
-          'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
-        providers: ['google'],
-      };
-
-      return (
-        <QueryClientProvider client={queryClient}>
-          <AuthContext.Provider
-            value={{
-              user: mockUser,
-              shouldShowLogin: false,
-              showLogin: fn(),
-              logout: fn(),
-              updateUser: fn(),
-              tokenRefreshed: true,
-              getRedirectUri: fn(),
-              loadingUser: false,
-              loadedUserFromCache: true,
-              refetchBoot: fn(),
-              squads: [],
-              isAndroidApp: false,
-            }}
-          >
-            <LogContext.Provider
-              value={{
-                logEvent: fn(),
-                logEventStart: fn(),
-                logEventEnd: fn(),
-                sendBeacon: fn(),
-              }}
-            >
-              <div className="max-w-[800px]">
-                <Story />
-              </div>
-            </LogContext.Provider>
-          </AuthContext.Provider>
-        </QueryClientProvider>
-      );
-    },
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AboutMe>;
-
-const shortContent = `
-# Here to break production
-
-Yes I do love to break production 🙈
-
-I'm a passionate developer who enjoys learning new technologies and building great products.
-`;
-
-const longContent = `
-# Here to break production
-
-Yes I do love to break production 🙈
-
-I'm a passionate developer who enjoys learning new technologies and building great products. I have over 10 years of experience in software development, working with various technologies and frameworks.
-
-## My Journey
-
-Started my journey as a junior developer and worked my way up through various roles. I've worked on:
-
-- Large-scale web applications
-- Mobile apps
-- Cloud infrastructure
-- DevOps and CI/CD pipelines
-
-## Technologies I Love
-
-I'm particularly interested in:
-
-- React and Next.js
-- TypeScript
-- Node.js
-- GraphQL
-- PostgreSQL
-- Docker and Kubernetes
-
-![Development Setup](https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&h=400&fit=crop)
-
-## What Drives Me
-
-I believe in writing clean, maintainable code and sharing knowledge with the community. When I'm not coding, you can find me:
-
-- Contributing to open source projects
-- Writing technical blog posts
-- Attending tech conferences
-- Mentoring junior developers
-
-Feel free to reach out if you want to collaborate on something exciting!
-`;
-
-export const Default: Story = {
-  args: {
-    user: {
-      id: '1',
-      username: 'testuser',
-      name: 'Test User',
-      image:
-        'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
-      readmeHtml: shortContent,
-    },
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    user: {
-      id: '1',
-      username: 'testuser',
-      name: 'Test User',
-      image:
-        'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
-      readmeHtml: longContent,
-    },
-  },
-};
-
-export const EmptyStateOwnProfile: Story = {
-  args: {
-    user: {
-      id: '1',
-      username: 'testuser',
-      name: 'Test User',
-      image:
-        'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
-      readmeHtml: undefined,
-    },
-  },
-};
-
-export const EmptyStateOtherProfile: Story = {
-  args: {
-    user: {
-      id: '2',
-      username: 'otheruser',
-      name: 'Other User',
-      image:
-        'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
-      readmeHtml: undefined,
-    },
-  },
-};
diff --git a/packages/webapp/__tests__/ProfileIndexPage.tsx b/packages/webapp/__tests__/ProfileIndexPage.tsx
index ceafc568c6..ce1b929fde 100644
--- a/packages/webapp/__tests__/ProfileIndexPage.tsx
+++ b/packages/webapp/__tests__/ProfileIndexPage.tsx
@@ -125,8 +125,22 @@ it('should show the top reading tags of the user', async () => {
   await screen.findByText('C#');
 });
 
-it('should show the readme of the user', async () => {
+it('should show the about me section with readme of the user', async () => {
   renderComponent();
   await waitForNock();
-  expect(await screen.findByText('This is my readme')).toBeInTheDocument();
+  const aboutMeHeadings = await screen.findAllByText('About me');
+  expect(aboutMeHeadings.length).toBeGreaterThan(0);
+  const readmeContent = await screen.findAllByText('This is my readme');
+  expect(readmeContent.length).toBeGreaterThan(0);
+});
+
+it('should show social links in about me section', async () => {
+  renderComponent();
+  await waitForNock();
+  const twitterLinks = await screen.findAllByTestId('social-link-twitter');
+  expect(twitterLinks.length).toBeGreaterThan(0);
+  expect(twitterLinks[0]).toHaveAttribute('href', 'https://x.com/dailydotdev');
+  const githubLinks = await screen.findAllByTestId('social-link-github');
+  expect(githubLinks.length).toBeGreaterThan(0);
+  expect(githubLinks[0]).toHaveAttribute('href', 'https://github.com/dailydotdev');
 });

From 23a33c670511ee18b4737ddb31c132a57479ac31 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Wed, 29 Oct 2025 09:39:32 +0100
Subject: [PATCH 03/16] fix: lint

---
 packages/webapp/__tests__/ProfileIndexPage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/__tests__/ProfileIndexPage.tsx b/packages/webapp/__tests__/ProfileIndexPage.tsx
index ce1b929fde..2f87a8db41 100644
--- a/packages/webapp/__tests__/ProfileIndexPage.tsx
+++ b/packages/webapp/__tests__/ProfileIndexPage.tsx
@@ -142,5 +142,8 @@ it('should show social links in about me section', async () => {
   expect(twitterLinks[0]).toHaveAttribute('href', 'https://x.com/dailydotdev');
   const githubLinks = await screen.findAllByTestId('social-link-github');
   expect(githubLinks.length).toBeGreaterThan(0);
-  expect(githubLinks[0]).toHaveAttribute('href', 'https://github.com/dailydotdev');
+  expect(githubLinks[0]).toHaveAttribute(
+    'href',
+    'https://github.com/dailydotdev',
+  );
 });

From 84944c3ad8c48f4b5bc17fb9b65ccbceab783301 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Wed, 29 Oct 2025 10:23:19 +0100
Subject: [PATCH 04/16] fix: expand

---
 packages/shared/src/components/ExpandableContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/ExpandableContent.tsx b/packages/shared/src/components/ExpandableContent.tsx
index 5a21891390..ba46778e0c 100644
--- a/packages/shared/src/components/ExpandableContent.tsx
+++ b/packages/shared/src/components/ExpandableContent.tsx
@@ -33,7 +33,7 @@ export function ExpandableContent({
       const contentHeight = measureRef.current.scrollHeight;
       setShowSeeMore(contentHeight > maxHeight);
     }
-  }, [maxHeight]);
+  }, [maxHeight, children]);
 
   return (
     <>

From 2ff68a1de073e8b567f4a0da318b1c906f2db9b8 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Wed, 29 Oct 2025 11:10:29 +0100
Subject: [PATCH 05/16] fix: handle async images

---
 .../src/components/ExpandableContent.spec.tsx |  8 +--
 .../src/components/ExpandableContent.tsx      | 34 ++++++-----
 .../ProfileWidgets/AboutMe.spec.tsx           | 37 +++++-------
 .../components/ExpandableContent.stories.tsx  | 57 ++++++++++++++++++-
 4 files changed, 92 insertions(+), 44 deletions(-)

diff --git a/packages/shared/src/components/ExpandableContent.spec.tsx b/packages/shared/src/components/ExpandableContent.spec.tsx
index 19f0697b34..425765a9bc 100644
--- a/packages/shared/src/components/ExpandableContent.spec.tsx
+++ b/packages/shared/src/components/ExpandableContent.spec.tsx
@@ -36,11 +36,9 @@ describe('ExpandableContent', () => {
 
   it('should render children content', () => {
     render(<ExpandableContent>{shortContent}</ExpandableContent>);
-    const elements = screen.getAllByText('Short content that fits');
-    // Should render twice: once hidden for measurement, once visible
-    expect(elements).toHaveLength(2);
-    // At least one should be visible
-    expect(elements[1]).toBeVisible();
+    const element = screen.getByText('Short content that fits');
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
   });
 
   it('should not show "See More" button when content is short', async () => {
diff --git a/packages/shared/src/components/ExpandableContent.tsx b/packages/shared/src/components/ExpandableContent.tsx
index ba46778e0c..81f68415b6 100644
--- a/packages/shared/src/components/ExpandableContent.tsx
+++ b/packages/shared/src/components/ExpandableContent.tsx
@@ -26,27 +26,35 @@ export function ExpandableContent({
   const [isExpanded, setIsExpanded] = useState(false);
   const [showSeeMore, setShowSeeMore] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
-  const measureRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (measureRef.current) {
-      const contentHeight = measureRef.current.scrollHeight;
+    const element = contentRef.current;
+    if (!element) {
+      return undefined;
+    }
+
+    const checkHeight = () => {
+      const contentHeight = element.scrollHeight;
       setShowSeeMore(contentHeight > maxHeight);
+    };
+
+    // Initial check
+    checkHeight();
+
+    // Only use ResizeObserver if there are images (for async loading)
+    const hasImages = element.querySelector('img') !== null;
+    if (!hasImages) {
+      return undefined;
     }
+
+    const resizeObserver = new ResizeObserver(checkHeight);
+    resizeObserver.observe(element);
+
+    return () => resizeObserver.disconnect();
   }, [maxHeight, children]);
 
   return (
     <>
-      {/* Hidden div for measuring actual content height */}
-      <div
-        ref={measureRef}
-        className="pointer-events-none invisible absolute"
-        aria-hidden="true"
-      >
-        {children}
-      </div>
-
-      {/* Visible content */}
       <div
         ref={contentRef}
         className={classNames(
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
index d3b4604221..81126650c3 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
@@ -91,60 +91,49 @@ describe('AboutMe', () => {
 
     it('should render when readme is present', () => {
       renderComponent(userWithReadme);
-      expect(screen.getAllByText('About me')[0]).toBeInTheDocument();
+      expect(screen.getByText('About me')).toBeInTheDocument();
       expect(
-        screen.getAllByText(
-          'This is my awesome bio with some **markdown**!',
-        )[0],
+        screen.getByText('This is my awesome bio with some **markdown**!'),
       ).toBeInTheDocument();
     });
 
     it('should render with social links when user has them', () => {
       renderComponent(userWithSocialLinks);
-      expect(
-        screen.getAllByTestId('social-link-github')[0],
-      ).toBeInTheDocument();
-      expect(
-        screen.getAllByTestId('social-link-linkedin')[0],
-      ).toBeInTheDocument();
-      expect(
-        screen.getAllByTestId('social-link-portfolio')[0],
-      ).toBeInTheDocument();
+      expect(screen.getByTestId('social-link-github')).toBeInTheDocument();
+      expect(screen.getByTestId('social-link-linkedin')).toBeInTheDocument();
+      expect(screen.getByTestId('social-link-portfolio')).toBeInTheDocument();
     });
   });
 
   describe('Social Links', () => {
     it('should show only first 3 social links initially', () => {
       renderComponent(userWithSocialLinks);
-      // Each link appears twice (measurement + visible), so we check the first half
       const allLinks = screen.getAllByTestId(/^social-link-/);
-      const visibleLinks = allLinks.slice(0, allLinks.length / 2);
-      expect(visibleLinks.length).toBe(3);
+      expect(allLinks.length).toBe(3);
     });
 
     it('should show "+N" button when more than 3 links', () => {
       renderComponent(userWithSocialLinks);
-      const showAllButtons = screen.getAllByTestId('show-all-links');
-      expect(showAllButtons[0]).toBeInTheDocument();
+      const showAllButton = screen.getByTestId('show-all-links');
+      expect(showAllButton).toBeInTheDocument();
       // 12 total links - 3 visible = 9 more
-      expect(showAllButtons[0]).toHaveTextContent('+9');
+      expect(showAllButton).toHaveTextContent('+9');
     });
 
     it('should show all links when "+N" button is clicked', async () => {
       renderComponent(userWithSocialLinks);
-      const showAllButton = screen.getAllByTestId('show-all-links')[0];
+      const showAllButton = screen.getByTestId('show-all-links');
       fireEvent.click(showAllButton);
 
       await waitFor(() => {
         const allLinks = screen.getAllByTestId(/^social-link-/);
-        const visibleLinks = allLinks.slice(0, allLinks.length / 2);
-        expect(visibleLinks.length).toBe(12); // All 12 social links
+        expect(allLinks.length).toBe(12); // All 12 social links
       });
     });
 
     it('should hide "+N" button after showing all links', async () => {
       renderComponent(userWithSocialLinks);
-      const showAllButton = screen.getAllByTestId('show-all-links')[0];
+      const showAllButton = screen.getByTestId('show-all-links');
       fireEvent.click(showAllButton);
 
       await waitFor(() => {
@@ -156,7 +145,7 @@ describe('AboutMe', () => {
   describe('Analytics', () => {
     it('should log click event for social links', () => {
       renderComponent(userWithSocialLinks);
-      const githubLink = screen.getAllByTestId('social-link-github')[0];
+      const githubLink = screen.getByTestId('social-link-github');
       fireEvent.click(githubLink);
 
       expect(mockLogEvent).toHaveBeenCalledWith({
diff --git a/packages/storybook/stories/components/ExpandableContent.stories.tsx b/packages/storybook/stories/components/ExpandableContent.stories.tsx
index 170fa30afb..b9bbc3b3ff 100644
--- a/packages/storybook/stories/components/ExpandableContent.stories.tsx
+++ b/packages/storybook/stories/components/ExpandableContent.stories.tsx
@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
+import type { ExpandableContentProps } from '@dailydotdev/shared/src/components/ExpandableContent';
 import { ExpandableContent } from '@dailydotdev/shared/src/components/ExpandableContent';
 
 const meta: Meta<typeof ExpandableContent> = {
@@ -22,6 +23,58 @@ export default meta;
 
 type Story = StoryObj<typeof ExpandableContent>;
 
+const LongTextContent = () => (
+  <div>
+    <h2 className="mb-4 text-2xl font-bold">Long Text Content</h2>
+    <p className="mb-4">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </p>
+    <p className="mb-4">
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p className="mb-4">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+      veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </p>
+    <p className="mb-4">
+      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+      sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+    </p>
+    <p className="mb-4">
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
+      dolore magnam aliquam quaerat voluptatem.
+    </p>
+    <p className="mb-4">
+      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
+      laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
+      reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
+    </p>
+    <p className="mb-4">
+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
+      excepturi sint occaecati cupiditate non provident.
+    </p>
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    maxHeight: 320,
+  },
+  render: (args: ExpandableContentProps) => (
+    <ExpandableContent {...args}>
+      <LongTextContent />
+    </ExpandableContent>
+  ),
+};
+
 const ContentWithImages = () => (
   <div>
     <h2 className="mb-4 text-2xl font-bold">Content with Images</h2>
@@ -55,7 +108,7 @@ export const WithImages: Story = {
   args: {
     maxHeight: 320,
   },
-  render: (args) => (
+  render: (args: ExpandableContentProps) => (
     <ExpandableContent {...args}>
       <ContentWithImages />
     </ExpandableContent>

From e7e1c1e5ad9637cf4b704e45798a80941d5a06f8 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Wed, 29 Oct 2025 11:25:28 +0100
Subject: [PATCH 06/16] fix: show see more in initial load

---
 .../shared/src/components/ExpandableContent.tsx  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/ExpandableContent.tsx b/packages/shared/src/components/ExpandableContent.tsx
index 81f68415b6..518a7385e2 100644
--- a/packages/shared/src/components/ExpandableContent.tsx
+++ b/packages/shared/src/components/ExpandableContent.tsx
@@ -38,19 +38,27 @@ export function ExpandableContent({
       setShowSeeMore(contentHeight > maxHeight);
     };
 
-    // Initial check
-    checkHeight();
+    // Wait for browser to complete layout before checking height
+    // Using double RAF ensures the layout is fully calculated
+    const rafId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        checkHeight();
+      });
+    });
 
     // Only use ResizeObserver if there are images (for async loading)
     const hasImages = element.querySelector('img') !== null;
     if (!hasImages) {
-      return undefined;
+      return () => cancelAnimationFrame(rafId);
     }
 
     const resizeObserver = new ResizeObserver(checkHeight);
     resizeObserver.observe(element);
 
-    return () => resizeObserver.disconnect();
+    return () => {
+      cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+    };
   }, [maxHeight, children]);
 
   return (

From b1cf1ab00c13de789692e42d43fd563a92a514fe Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Wed, 29 Oct 2025 11:46:24 +0100
Subject: [PATCH 07/16] fix: border

---
 packages/webapp/pages/[userId]/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/pages/[userId]/index.tsx b/packages/webapp/pages/[userId]/index.tsx
index 9269e648ed..8562c42f96 100644
--- a/packages/webapp/pages/[userId]/index.tsx
+++ b/packages/webapp/pages/[userId]/index.tsx
@@ -79,11 +79,12 @@ const ProfilePage = ({
             isLoading={status === 'pending'}
           />
         )}
+        {!shouldShowBanner && <div />}
         <AboutMe user={user} />
         {isUserSame && (
           <Share permalink={user?.permalink} className="laptop:hidden" />
         )}
-        <div className="py-4">
+        <div className="py-4 laptop:hidden">
           <Typography
             type={TypographyType.Body}
             tag={TypographyTag.H1}

From 1e3085b108737dee5c10faa513bd6c0ce668b616 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Wed, 29 Oct 2025 12:24:28 +0100
Subject: [PATCH 08/16] fix: showing squads in mobile

---
 .../components/ProfileWidgets/ActiveOrRecomendedSquads.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.tsx
index c67e0f77a6..c7444ba3c2 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.tsx
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ActiveOrRecomendedSquads.tsx
@@ -100,7 +100,7 @@ export const ActiveOrRecomendedSquads = (
         >
           {heading}
         </Typography>
-        <ul className="mt-4 flex flex-col gap-2">
+        <ul className="mt-4 flex max-h-96 flex-col gap-2 overflow-y-auto laptop:max-h-none laptop:overflow-y-visible">
           {squads.map((squad) => (
             <SquadListItem
               key={squad.id}

From 9dda154f9bcd5eb551764797bf57656b0b8a238c Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Thu, 30 Oct 2025 12:59:30 +0100
Subject: [PATCH 09/16] feat: new activity section + fix profile betwen laptop
 tablet transition

---
 .../components/ProfileWidgets/Activity.tsx    | 262 ++++++++++++++++++
 packages/shared/src/styles/utilities.css      |  17 ++
 .../layouts/ProfileLayout/index.tsx           |  10 +-
 .../webapp/hooks/useProfileSidebarCollapse.ts |  36 +++
 packages/webapp/pages/[userId]/index.tsx      |   2 +
 5 files changed, 324 insertions(+), 3 deletions(-)
 create mode 100644 packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
 create mode 100644 packages/webapp/hooks/useProfileSidebarCollapse.ts

diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
new file mode 100644
index 0000000000..6e1c416cde
--- /dev/null
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
@@ -0,0 +1,262 @@
+import type { ReactElement } from 'react';
+import React, { useContext, useState, useMemo } from 'react';
+import classNames from 'classnames';
+import type { PublicProfile } from '../../../../lib/user';
+import {
+  Button,
+  ButtonVariant,
+} from '../../../../components/buttons/Button';
+import type { FeedProps } from '../../../../components/Feed';
+import Feed from '../../../../components/Feed';
+import { AUTHOR_FEED_QUERY, USER_UPVOTED_FEED_QUERY } from '../../../../graphql/feed';
+import { OtherFeedPage } from '../../../../lib/query';
+import { MyProfileEmptyScreen } from '../../../../components/profile/MyProfileEmptyScreen';
+import { ProfileEmptyScreen } from '../../../../components/profile/ProfileEmptyScreen';
+import AuthContext from '../../../../contexts/AuthContext';
+import CommentFeed from '../../../../components/CommentFeed';
+import { USER_COMMENTS_QUERY } from '../../../../graphql/comments';
+import { Origin } from '../../../../lib/log';
+import { generateQueryKey, RequestKey } from '../../../../lib/query';
+import { link } from '../../../../lib/links';
+import { useHorizontalScrollHeader } from '../../../../components/HorizontalScroll/useHorizontalScrollHeader';
+import { TypographyType, Typography } from '../../../../components/typography/Typography';
+import { ArrowIcon } from '../../../../components/icons';
+import Link from '../../../../components/utilities/Link';
+import FeedContext from '../../../../contexts/FeedContext';
+
+export type ActivityTab = { id: string; title: string; path: string };
+
+export const activityTabs: ActivityTab[] = [
+  {
+    id: 'posts',
+    title: 'Posts',
+    path: '/posts',
+  },
+  {
+    id: 'replies',
+    title: 'Replies',
+    path: '/replies',
+  },
+  {
+    id: 'upvoted',
+    title: 'Upvoted',
+    path: '/upvoted',
+  },
+];
+
+interface ActivityProps {
+  user: PublicProfile;
+}
+
+const commentClassName = {
+  container: 'rounded-none border-0 border-b',
+  commentBox: {
+    container: 'relative border-0 rounded-none',
+  },
+};
+
+const CARD_WIDTH = 272;
+const CARD_GAP = 16;
+
+export const Activity = ({ user }: ActivityProps): ReactElement => {
+  const [selectedTab, setSelectedTab] = useState(0);
+  const { user: loggedUser } = useContext(AuthContext);
+  const currentFeedSettings = useContext(FeedContext);
+  const isSameUser = user && loggedUser?.id === user.id;
+  const userId = user?.id;
+
+  const getUserPath = (path: string) => {
+    const username = user?.username || user?.id;
+    return `/${username}${path}`;
+  };
+
+  // Calculate numCards based on container width
+  // Assuming parent has p-6 (24px padding) and we need to fit 272px cards with 16px gaps
+  const feedContextValue = useMemo(() => {
+    // Calculate based on typical mobile/tablet widths
+    // For a container with ~600px available width: (600 + 16) / (272 + 16) ≈ 2.14 cards
+    // We'll show 2 cards to ensure good scrolling UX
+    const calculatedNumCards = 3;
+    
+    return {
+      ...currentFeedSettings,
+      numCards: {
+        eco: calculatedNumCards,
+        roomy: calculatedNumCards,
+        cozy: calculatedNumCards,
+      },
+    };
+  }, [currentFeedSettings]);
+
+  const postsFeedProps: FeedProps<unknown> = {
+    feedName: OtherFeedPage.Author,
+    feedQueryKey: ['author', userId],
+    query: AUTHOR_FEED_QUERY,
+    variables: {
+      userId,
+    },
+    disableAds: true,
+    allowFetchMore: false,
+    pageSize: 10,
+    isHorizontal: true,
+    emptyScreen: isSameUser ? (
+      <MyProfileEmptyScreen
+        className="items-center px-4 py-6 text-center tablet:px-6"
+        text="Hardest part of being a developer? Where do we start – it's everything. Go on, share with us your best rant."
+        cta="New post"
+        buttonProps={{ tag: 'a', href: link.post.create }}
+      />
+    ) : (
+      <ProfileEmptyScreen
+        title={`${user?.name ?? 'User'} hasn't posted yet`}
+        text="Once they do, those posts will show up here."
+      />
+    ),
+  };
+
+  const upvotedFeedProps: FeedProps<unknown> = {
+    feedName: OtherFeedPage.UserUpvoted,
+    feedQueryKey: ['user_upvoted', userId],
+    query: USER_UPVOTED_FEED_QUERY,
+    variables: {
+      userId,
+    },
+    disableAds: true,
+    allowFetchMore: false,
+    pageSize: 10,
+    isHorizontal: true,
+    emptyScreen: isSameUser ? (
+      <MyProfileEmptyScreen
+        className="items-center px-4 py-6 text-center tablet:px-6"
+        text="Trapped in endless meetings? Make the most of It - Find posts you love and upvote away!"
+        cta="Explore posts"
+        buttonProps={{ tag: 'a', href: '/' }}
+      />
+    ) : (
+      <ProfileEmptyScreen
+        title={`${user?.name ?? 'User'} hasn't upvoted yet`}
+        text="Once they do, those posts will show up here."
+      />
+    ),
+  };
+
+  const commentsEmptyScreen = isSameUser ? (
+    <MyProfileEmptyScreen
+      className="items-center px-4 py-6 text-center tablet:px-6"
+      text="All tests have passed on the first try and you have no idea why? Time for a break. Browse the feed and join a discussion!"
+      cta="Explore posts"
+      buttonProps={{ tag: 'a', href: '/' }}
+    />
+  ) : (
+    <ProfileEmptyScreen
+      title={`${user?.name ?? 'User'} hasn't replied to any post yet`}
+      text="Once they do, those replies will show up here."
+    />
+  );
+
+  const { ref, isAtStart, isAtEnd, onClickNext, onClickPrevious, isOverflowing } =
+    useHorizontalScrollHeader({
+      title: { copy: 'Activity', type: TypographyType.Body },
+    });
+
+  const renderContent = () => {
+    switch (selectedTab) {
+      case 0: // Posts
+        return (
+          <FeedContext.Provider value={feedContextValue}>
+            <div className="-mx-6 [&_.grid]:!auto-cols-[272px] [&_.grid]:gap-4 [&_.grid]:px-6">
+              <Feed
+                {...postsFeedProps}
+                className="mb-4"
+                feedContainerRef={ref}
+              />
+            </div>
+          </FeedContext.Provider>
+        );
+      case 1: // Replies
+        return (
+          <CommentFeed
+            feedQueryKey={generateQueryKey(RequestKey.UserComments, null, userId)}
+            query={USER_COMMENTS_QUERY}
+            logOrigin={Origin.Profile}
+            variables={{ userId }}
+            emptyScreen={commentsEmptyScreen}
+            commentClassName={commentClassName}
+          />
+        );
+      case 2: // Upvoted
+        return (
+          <FeedContext.Provider value={feedContextValue}>
+            <div className="-mx-6 [&_.grid]:!auto-cols-[272px] [&_.grid]:gap-4 [&_.grid]:px-6">
+              <Feed
+                {...upvotedFeedProps}
+                className="mb-4"
+                feedContainerRef={ref}
+              />
+            </div>
+          </FeedContext.Provider>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3 overflow-hidden pt-6">
+      <div className="flex flex-col gap-3">
+        <Typography type={TypographyType.Body} bold>
+          Activity
+        </Typography>
+        <div className="flex items-center justify-between pb-3">
+          <div className="flex gap-3">
+            {activityTabs.map((tab, index) => (
+              <button
+                key={tab.id}
+                onClick={() => setSelectedTab(index)}
+                className={classNames(
+                  'typo-body rounded-6 px-2 py-1.5 font-bold transition-colors',
+                  selectedTab === index
+                    ? 'bg-theme-active text-text-primary'
+                    : 'text-text-tertiary hover:text-text-secondary'
+                )}
+              >
+                {tab.title}
+              </button>
+            ))}
+          </div>
+          {isOverflowing && selectedTab !== 1 && (
+            <div className="flex gap-3">
+              <Button
+                variant={ButtonVariant.Tertiary}
+                icon={<ArrowIcon className="-rotate-90" />}
+                disabled={isAtStart}
+                onClick={onClickPrevious}
+                aria-label="Scroll left"
+              />
+              <Button
+                variant={ButtonVariant.Tertiary}
+                icon={<ArrowIcon className="rotate-90" />}
+                disabled={isAtEnd}
+                onClick={onClickNext}
+                aria-label="Scroll right"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      {renderContent()}
+      {selectedTab !== 1 && (
+        <Link href={getUserPath(activityTabs[selectedTab].path)} passHref>
+          <Button
+            tag="a"
+            variant={ButtonVariant.Tertiary}
+            className="w-full"
+          >
+            Show More
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+};
+
diff --git a/packages/shared/src/styles/utilities.css b/packages/shared/src/styles/utilities.css
index 48bbd47506..e6dc7be5e2 100644
--- a/packages/shared/src/styles/utilities.css
+++ b/packages/shared/src/styles/utilities.css
@@ -31,3 +31,20 @@
 .break-words-overflow {
   overflow-wrap: break-word;
 }
+
+/* Sidebar overlay mode on profile pages below 1360px */
+@media (max-width: 1359px) and (min-width: 1020px) {
+  /* Make sidebar overlay on top of content when expanded */
+  body:has(.profile-page) nav[role="navigation"] {
+    position: fixed !important;
+    z-index: 100 !important;
+    height: 100vh !important;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
+  }
+
+  /* Remove sidebar padding from main content */
+  body:has(.profile-page) main {
+    padding-left: 0 !important;
+    margin-left: 20px;
+  }
+}
diff --git a/packages/webapp/components/layouts/ProfileLayout/index.tsx b/packages/webapp/components/layouts/ProfileLayout/index.tsx
index ff21bd67b4..4bde4cd74d 100644
--- a/packages/webapp/components/layouts/ProfileLayout/index.tsx
+++ b/packages/webapp/components/layouts/ProfileLayout/index.tsx
@@ -26,6 +26,7 @@ import { getLayout as getFooterNavBarLayout } from '../FooterNavBarLayout';
 import { getLayout as getMainLayout } from '../MainLayout';
 import { getTemplatedTitle } from '../utils';
 import { ProfileWidgets } from '../../../../shared/src/features/profile/components/ProfileWidgets/ProfileWidgets';
+import { useProfileSidebarCollapse } from '../../../hooks/useProfileSidebarCollapse';
 
 const Custom404 = dynamic(
   () => import(/* webpackChunkName: "404" */ '../../../pages/404'),
@@ -79,6 +80,9 @@ export default function ProfileLayout({
   const { logEvent } = useLogContext();
   const { referrerPost } = usePostReferrerContext();
 
+  // Auto-collapse sidebar on small screens
+  useProfileSidebarCollapse();
+
   useEffect(() => {
     if (trackedView || !user) {
       return;
@@ -107,12 +111,12 @@ export default function ProfileLayout({
   }
 
   return (
-    <div className="m-auto flex w-full max-w-screen-laptop flex-col pb-12 tablet:pb-0 laptop:min-h-page laptop:flex-row laptop:gap-4 laptop:p-4 laptop:pb-6">
+    <div className="profile-page m-auto flex w-full laptopL:max-w-6xl laptop:max-w-5xl flex-col pb-12 tablet:pb-0 laptop:min-h-page laptop:flex-row laptop:gap-4 laptop:p-4 laptop:pb-6">
       <Head>
         <link rel="preload" as="image" href={user.image} />
       </Head>
-      <main className="relative flex flex-1 flex-col">{children}</main>
-      <aside className="hidden laptop:flex laptop:max-w-80 laptop:flex-col">
+      <main className="relative flex flex-1 flex-col laptopL:max-w-3xl laptop:max-w-2xl">{children}</main>
+      <aside className="hidden min-w-0 laptop:flex laptop:max-w-80 laptop:flex-col laptop:flex-shrink">
         <ProfileWidgets
           user={user}
           userStats={userStats}
diff --git a/packages/webapp/hooks/useProfileSidebarCollapse.ts b/packages/webapp/hooks/useProfileSidebarCollapse.ts
new file mode 100644
index 0000000000..55a7e27f0c
--- /dev/null
+++ b/packages/webapp/hooks/useProfileSidebarCollapse.ts
@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext';
+
+const COLLAPSE_BREAKPOINT = 1360;
+
+/**
+ * Auto-collapses sidebar on profile pages when screen is below 1360px
+ * Requirements:
+ * 1. Resize big→small: open sidebar collapses, closed sidebar stays closed
+ * 2. Manual toggle in small screen: opens as overlay without glitches
+ * 3. Refresh in small screen: sidebar always collapses (even if user opened it)
+ */
+export const useProfileSidebarCollapse = () => {
+  const { sidebarExpanded, toggleSidebarExpanded, loadedSettings } = useSettingsContext();
+  // Ref needed for resize handler to avoid stale closures
+  const sidebarExpandedRef = useRef(sidebarExpanded);
+
+  // Keep ref in sync with current sidebar state
+  useEffect(() => {
+    sidebarExpandedRef.current = sidebarExpanded;
+  }, [sidebarExpanded]);
+
+  // Handle resize from big to small
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`);
+
+    const handleBreakpointChange = (e: MediaQueryListEvent) => {
+      if (e.matches && sidebarExpandedRef.current) {
+        toggleSidebarExpanded();
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleBreakpointChange);
+    return () => mediaQuery.removeEventListener('change', handleBreakpointChange);
+  }, [toggleSidebarExpanded]);
+};
diff --git a/packages/webapp/pages/[userId]/index.tsx b/packages/webapp/pages/[userId]/index.tsx
index 8562c42f96..6de4eb05e4 100644
--- a/packages/webapp/pages/[userId]/index.tsx
+++ b/packages/webapp/pages/[userId]/index.tsx
@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
 import { AboutMe } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/AboutMe';
+import { Activity } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/Activity';
 import { useProfile } from '@dailydotdev/shared/src/hooks/profile/useProfile';
 import { useActions, useJoinReferral } from '@dailydotdev/shared/src/hooks';
 import { NextSeo } from 'next-seo';
@@ -81,6 +82,7 @@ const ProfilePage = ({
         )}
         {!shouldShowBanner && <div />}
         <AboutMe user={user} />
+        <Activity user={user} />
         {isUserSame && (
           <Share permalink={user?.permalink} className="laptop:hidden" />
         )}

From ec48bb8169463bcb59aac5f750f31740014c531a Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Fri, 31 Oct 2025 09:40:30 +0100
Subject: [PATCH 10/16] fix: using tabs for activity + use horizontal scroll
 header

---
 .../HorizontalScrollHeader.tsx                |  12 +-
 .../useHorizontalScrollHeader.tsx             |   2 +-
 .../components/ProfileWidgets/Activity.tsx    | 116 ++++++++----------
 .../webapp/hooks/useProfileSidebarCollapse.ts |  34 +++--
 4 files changed, 85 insertions(+), 79 deletions(-)

diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
index a87c2a5f67..b32a7a28e7 100644
--- a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
+++ b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
@@ -15,7 +15,7 @@ export interface HorizontalScrollTitleProps {
 }
 
 export interface HorizontalScrollHeaderProps {
-  title: HorizontalScrollTitleProps;
+  title?: HorizontalScrollTitleProps | ReactNode;
   isAtEnd: boolean;
   isAtStart: boolean;
   onClickNext: MouseEventHandler;
@@ -51,9 +51,17 @@ export function HorizontalScrollHeader({
   linkToSeeAll,
   canScroll,
 }: HorizontalScrollHeaderProps): ReactElement {
+  // Check if title is props object or custom ReactNode
+  const isCustomTitle =
+    title && typeof title === 'object' && !('copy' in title);
+
   return (
     <div className="mx-4 mb-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
-      <HorizontalScrollTitle {...title} />
+      {isCustomTitle
+        ? title
+        : title && (
+            <HorizontalScrollTitle {...(title as HorizontalScrollTitleProps)} />
+          )}
       {canScroll && (
         <div className="hidden flex-row items-center gap-3 tablet:flex">
           <Button
diff --git a/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
index dd7454f55f..c013d82269 100644
--- a/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
+++ b/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
@@ -21,7 +21,7 @@ export interface UseHorizontalScrollHeaderProps {
   onScroll?: (ref: RefObject<HTMLElement>) => void;
   onClickSeeAll?: MouseEventHandler;
   linkToSeeAll?: string;
-  title: HorizontalScrollTitleProps;
+  title?: HorizontalScrollTitleProps | ReactNode;
 }
 
 export const useHorizontalScrollHeader = <
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
index 6e1c416cde..37d419d355 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
@@ -20,9 +20,9 @@ import { generateQueryKey, RequestKey } from '../../../../lib/query';
 import { link } from '../../../../lib/links';
 import { useHorizontalScrollHeader } from '../../../../components/HorizontalScroll/useHorizontalScrollHeader';
 import { TypographyType, Typography } from '../../../../components/typography/Typography';
-import { ArrowIcon } from '../../../../components/icons';
 import Link from '../../../../components/utilities/Link';
 import FeedContext from '../../../../contexts/FeedContext';
+import TabList from '../../../../components/tabs/TabList';
 
 export type ActivityTab = { id: string; title: string; path: string };
 
@@ -55,35 +55,30 @@ const commentClassName = {
   },
 };
 
-const CARD_WIDTH = 272;
-const CARD_GAP = 16;
-
 export const Activity = ({ user }: ActivityProps): ReactElement => {
-  const [selectedTab, setSelectedTab] = useState(0);
+  const [selectedTab, setSelectedTab] = useState<string>(activityTabs[0].title);
   const { user: loggedUser } = useContext(AuthContext);
   const currentFeedSettings = useContext(FeedContext);
   const isSameUser = user && loggedUser?.id === user.id;
   const userId = user?.id;
+  
+  const selectedTabIndex = activityTabs.findIndex(tab => tab.title === selectedTab);
 
   const getUserPath = (path: string) => {
     const username = user?.username || user?.id;
     return `/${username}${path}`;
   };
 
-  // Calculate numCards based on container width
-  // Assuming parent has p-6 (24px padding) and we need to fit 272px cards with 16px gaps
   const feedContextValue = useMemo(() => {
-    // Calculate based on typical mobile/tablet widths
-    // For a container with ~600px available width: (600 + 16) / (272 + 16) ≈ 2.14 cards
-    // We'll show 2 cards to ensure good scrolling UX
-    const calculatedNumCards = 3;
+    // We'll show 3 cards to make sure enough cards show on most screens
+    const numCards = 3;
     
     return {
       ...currentFeedSettings,
       numCards: {
-        eco: calculatedNumCards,
-        roomy: calculatedNumCards,
-        cozy: calculatedNumCards,
+        eco: numCards,
+        roomy: numCards,
+        cozy: numCards,
       },
     };
   }, [currentFeedSettings]);
@@ -154,17 +149,33 @@ export const Activity = ({ user }: ActivityProps): ReactElement => {
     />
   );
 
-  const { ref, isAtStart, isAtEnd, onClickNext, onClickPrevious, isOverflowing } =
-    useHorizontalScrollHeader({
-      title: { copy: 'Activity', type: TypographyType.Body },
-    });
+  // Render custom title content (shared across all tabs)
+  const renderTitleContent = () => (
+    <div className="flex flex-col gap-3">
+      <Typography type={TypographyType.Body} bold>
+        Activity
+      </Typography>
+      <div className="pb-3">
+        <TabList
+          items={activityTabs.map(tab => ({ label: tab.title }))}
+          active={selectedTab}
+          onClick={(label) => setSelectedTab(label)}
+        />
+      </div>
+    </div>
+  );
+
+  // Use horizontal scroll header (with navigation arrows) for Posts/Upvoted
+  const { ref, header: horizontalHeader } = useHorizontalScrollHeader({
+    title: renderTitleContent(),
+  });
 
   const renderContent = () => {
-    switch (selectedTab) {
+    switch (selectedTabIndex) {
       case 0: // Posts
         return (
           <FeedContext.Provider value={feedContextValue}>
-            <div className="-mx-6 [&_.grid]:!auto-cols-[272px] [&_.grid]:gap-4 [&_.grid]:px-6">
+            <div className="[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4">
               <Feed
                 {...postsFeedProps}
                 className="mb-4"
@@ -187,8 +198,8 @@ export const Activity = ({ user }: ActivityProps): ReactElement => {
       case 2: // Upvoted
         return (
           <FeedContext.Provider value={feedContextValue}>
-            <div className="-mx-6 [&_.grid]:!auto-cols-[272px] [&_.grid]:gap-4 [&_.grid]:px-6">
-              <Feed
+            <div className="[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4">
+            <Feed
                 {...upvotedFeedProps}
                 className="mb-4"
                 feedContainerRef={ref}
@@ -201,52 +212,27 @@ export const Activity = ({ user }: ActivityProps): ReactElement => {
     }
   };
 
+  // Conditionally render header based on tab type
+  const renderHeader = () => {
+    // Replies tab: just show title (no horizontal scroll arrows)
+    if (selectedTabIndex === 1) {
+      return (
+        <div className="mx-4 mb-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
+          {renderTitleContent()}
+        </div>
+      );
+    }
+    
+    // Posts/Upvoted tabs: show title + horizontal scroll arrows
+    return horizontalHeader;
+  };
+
   return (
     <div className="flex flex-col gap-3 overflow-hidden pt-6">
-      <div className="flex flex-col gap-3">
-        <Typography type={TypographyType.Body} bold>
-          Activity
-        </Typography>
-        <div className="flex items-center justify-between pb-3">
-          <div className="flex gap-3">
-            {activityTabs.map((tab, index) => (
-              <button
-                key={tab.id}
-                onClick={() => setSelectedTab(index)}
-                className={classNames(
-                  'typo-body rounded-6 px-2 py-1.5 font-bold transition-colors',
-                  selectedTab === index
-                    ? 'bg-theme-active text-text-primary'
-                    : 'text-text-tertiary hover:text-text-secondary'
-                )}
-              >
-                {tab.title}
-              </button>
-            ))}
-          </div>
-          {isOverflowing && selectedTab !== 1 && (
-            <div className="flex gap-3">
-              <Button
-                variant={ButtonVariant.Tertiary}
-                icon={<ArrowIcon className="-rotate-90" />}
-                disabled={isAtStart}
-                onClick={onClickPrevious}
-                aria-label="Scroll left"
-              />
-              <Button
-                variant={ButtonVariant.Tertiary}
-                icon={<ArrowIcon className="rotate-90" />}
-                disabled={isAtEnd}
-                onClick={onClickNext}
-                aria-label="Scroll right"
-              />
-            </div>
-          )}
-        </div>
-      </div>
+      {renderHeader()}
       {renderContent()}
-      {selectedTab !== 1 && (
-        <Link href={getUserPath(activityTabs[selectedTab].path)} passHref>
+      {selectedTabIndex !== 1 && (
+        <Link href={getUserPath(activityTabs[selectedTabIndex].path)} passHref>
           <Button
             tag="a"
             variant={ButtonVariant.Tertiary}
diff --git a/packages/webapp/hooks/useProfileSidebarCollapse.ts b/packages/webapp/hooks/useProfileSidebarCollapse.ts
index 55a7e27f0c..390014b92c 100644
--- a/packages/webapp/hooks/useProfileSidebarCollapse.ts
+++ b/packages/webapp/hooks/useProfileSidebarCollapse.ts
@@ -5,32 +5,44 @@ const COLLAPSE_BREAKPOINT = 1360;
 
 /**
  * Auto-collapses sidebar on profile pages when screen is below 1360px
- * Requirements:
- * 1. Resize big→small: open sidebar collapses, closed sidebar stays closed
- * 2. Manual toggle in small screen: opens as overlay without glitches
- * 3. Refresh in small screen: sidebar always collapses (even if user opened it)
- */
+**/
+
 export const useProfileSidebarCollapse = () => {
   const { sidebarExpanded, toggleSidebarExpanded, loadedSettings } = useSettingsContext();
-  // Ref needed for resize handler to avoid stale closures
+  // Refs to avoid stale closures and unnecessary effect re-runs
   const sidebarExpandedRef = useRef(sidebarExpanded);
+  const toggleSidebarExpandedRef = useRef(toggleSidebarExpanded);
 
-  // Keep ref in sync with current sidebar state
+  // Keep refs in sync
   useEffect(() => {
     sidebarExpandedRef.current = sidebarExpanded;
-  }, [sidebarExpanded]);
+    toggleSidebarExpandedRef.current = toggleSidebarExpanded;
+  }, [sidebarExpanded, toggleSidebarExpanded]);
+
+  // Auto-collapse on mount (runs once when settings load)
+  useEffect(() => {
+    if (!loadedSettings) return;
+
+    const isSmallScreen = window.matchMedia(`(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`).matches;
+    
+    if (isSmallScreen && sidebarExpanded) {
+      toggleSidebarExpanded();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loadedSettings]);
 
-  // Handle resize from big to small
+  // Handle resize from big to small (runs once on mount, listener persists)
   useEffect(() => {
     const mediaQuery = window.matchMedia(`(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`);
 
     const handleBreakpointChange = (e: MediaQueryListEvent) => {
+      // Use refs to access current values without re-creating listener
       if (e.matches && sidebarExpandedRef.current) {
-        toggleSidebarExpanded();
+        toggleSidebarExpandedRef.current();
       }
     };
 
     mediaQuery.addEventListener('change', handleBreakpointChange);
     return () => mediaQuery.removeEventListener('change', handleBreakpointChange);
-  }, [toggleSidebarExpanded]);
+  }, []); // Empty deps = runs once, listener stays active
 };

From 1df7e43faf2daf6175d3820b37f004124225a854 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Fri, 31 Oct 2025 11:26:54 +0100
Subject: [PATCH 11/16] fix: show more button on activity section

---
 .../HorizontalScrollHeader.tsx                | 16 +++++-
 .../useHorizontalScrollHeader.tsx             |  7 +++
 .../components/ProfileWidgets/Activity.tsx    | 56 +++++++++++++++----
 3 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
index b32a7a28e7..381762cf5a 100644
--- a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
+++ b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx
@@ -1,8 +1,9 @@
 import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import Link from '../utilities/Link';
 import { Button } from '../buttons/Button';
-import { ButtonVariant } from '../buttons/common';
+import { ButtonSize, ButtonVariant } from '../buttons/common';
 import ConditionalWrapper from '../ConditionalWrapper';
 import { ArrowIcon } from '../icons';
 import { Typography, TypographyType } from '../typography/Typography';
@@ -23,6 +24,8 @@ export interface HorizontalScrollHeaderProps {
   onClickSeeAll?: MouseEventHandler;
   linkToSeeAll?: string;
   canScroll: boolean;
+  className?: string;
+  buttonSize?: ButtonSize;
 }
 
 export const HorizontalScrollTitle = ({
@@ -50,13 +53,20 @@ export function HorizontalScrollHeader({
   onClickSeeAll,
   linkToSeeAll,
   canScroll,
+  className,
+  buttonSize = ButtonSize.Medium,
 }: HorizontalScrollHeaderProps): ReactElement {
   // Check if title is props object or custom ReactNode
   const isCustomTitle =
     title && typeof title === 'object' && !('copy' in title);
 
   return (
-    <div className="mx-4 mb-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
+    <div
+      className={classNames(
+        'mx-4 mb-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full',
+        className,
+      )}
+    >
       {isCustomTitle
         ? title
         : title && (
@@ -70,6 +80,7 @@ export function HorizontalScrollHeader({
             disabled={isAtStart}
             onClick={onClickPrevious}
             aria-label="Scroll left"
+            size={buttonSize}
           />
           <Button
             variant={ButtonVariant.Tertiary}
@@ -77,6 +88,7 @@ export function HorizontalScrollHeader({
             disabled={isAtEnd}
             onClick={onClickNext}
             aria-label="Scroll right"
+            size={buttonSize}
           />
           {(onClickSeeAll || linkToSeeAll) && (
             <ConditionalWrapper
diff --git a/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
index c013d82269..c585662135 100644
--- a/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
+++ b/packages/shared/src/components/HorizontalScroll/useHorizontalScrollHeader.tsx
@@ -1,5 +1,6 @@
 import type { MouseEventHandler, ReactNode, RefObject } from 'react';
 import React, { useCallback, useRef } from 'react';
+import { ButtonSize } from '../buttons/common';
 import { useScrollManagement } from './useScrollManagement';
 import { useCalculateVisibleElements } from './useCalculateVisibleElements';
 import type { HorizontalScrollTitleProps } from './HorizontalScrollHeader';
@@ -22,6 +23,8 @@ export interface UseHorizontalScrollHeaderProps {
   onClickSeeAll?: MouseEventHandler;
   linkToSeeAll?: string;
   title?: HorizontalScrollTitleProps | ReactNode;
+  className?: string;
+  buttonSize?: ButtonSize;
 }
 
 export const useHorizontalScrollHeader = <
@@ -31,6 +34,8 @@ export const useHorizontalScrollHeader = <
   onClickSeeAll,
   linkToSeeAll,
   title,
+  className,
+  buttonSize = ButtonSize.Medium,
 }: UseHorizontalScrollHeaderProps): HorizontalScrollHeaderReturn<El> => {
   const ref = useRef<El>(null);
   // Calculate the width of elements and the number of visible cards
@@ -70,6 +75,8 @@ export const useHorizontalScrollHeader = <
       onClickPrevious={onClickPrevious}
       onClickSeeAll={onClickSeeAll}
       linkToSeeAll={linkToSeeAll}
+      className={className}
+      buttonSize={buttonSize}
     />
   );
 
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
index 37d419d355..c5c1d335f1 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 import React, { useContext, useState, useMemo } from 'react';
-import classNames from 'classnames';
+import { useQuery } from '@tanstack/react-query';
 import type { PublicProfile } from '../../../../lib/user';
 import {
   Button,
@@ -23,6 +23,7 @@ import { TypographyType, Typography } from '../../../../components/typography/Ty
 import Link from '../../../../components/utilities/Link';
 import FeedContext from '../../../../contexts/FeedContext';
 import TabList from '../../../../components/tabs/TabList';
+import { ButtonSize } from '../../../../components/buttons/common';
 
 export type ActivityTab = { id: string; title: string; path: string };
 
@@ -149,25 +150,60 @@ export const Activity = ({ user }: ActivityProps): ReactElement => {
     />
   );
 
+  // Query to check if there are more than 3 posts
+  const { data: postsData } = useQuery({
+    queryKey: ['author', userId],
+    enabled: false, // Don't auto-fetch, Feed component handles fetching
+  });
+
+  // Query to check if there are more than 3 upvoted posts
+  const { data: upvotedData } = useQuery({
+    queryKey: [OtherFeedPage.UserUpvoted, userId],
+    enabled: false,
+  });
+
+  // Query to check if there are more than 3 comments
+  const { data: commentsData } = useQuery({
+    queryKey: generateQueryKey(RequestKey.UserComments, null, userId),
+    enabled: false,
+  });
+
+  // Check if current tab has more than 3 items to show "Show More" button
+  const shouldShowMoreButton = useMemo(() => {
+    const MIN_ITEMS = 3;
+    
+    switch (selectedTabIndex) {
+      case 0: // Posts
+        return ((postsData as any)?.pages?.[0]?.page?.edges?.length ?? 0) > MIN_ITEMS;
+      case 1: // Replies
+        return ((commentsData as any)?.page?.edges?.length ?? 0) > MIN_ITEMS;
+      case 2: // Upvoted
+        return ((upvotedData as any)?.pages?.[0]?.page?.edges?.length ?? 0) > MIN_ITEMS;
+      default:
+        return false;
+    }
+  }, [selectedTabIndex, postsData, commentsData, upvotedData]);
+
   // Render custom title content (shared across all tabs)
   const renderTitleContent = () => (
     <div className="flex flex-col gap-3">
       <Typography type={TypographyType.Body} bold>
         Activity
       </Typography>
-      <div className="pb-3">
         <TabList
           items={activityTabs.map(tab => ({ label: tab.title }))}
           active={selectedTab}
           onClick={(label) => setSelectedTab(label)}
+          className={{ item: '!p-0 !pr-3', indicator: 'hidden' }}
         />
-      </div>
     </div>
   );
 
   // Use horizontal scroll header (with navigation arrows) for Posts/Upvoted
   const { ref, header: horizontalHeader } = useHorizontalScrollHeader({
     title: renderTitleContent(),
+    className: '!items-end !mb-0',
+    buttonSize: ButtonSize.Small,
   });
 
   const renderContent = () => {
@@ -175,13 +211,11 @@ export const Activity = ({ user }: ActivityProps): ReactElement => {
       case 0: // Posts
         return (
           <FeedContext.Provider value={feedContextValue}>
-            <div className="[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4">
               <Feed
                 {...postsFeedProps}
-                className="mb-4"
+                className="[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4"
                 feedContainerRef={ref}
               />
-            </div>
           </FeedContext.Provider>
         );
       case 1: // Replies
@@ -198,13 +232,11 @@ export const Activity = ({ user }: ActivityProps): ReactElement => {
       case 2: // Upvoted
         return (
           <FeedContext.Provider value={feedContextValue}>
-            <div className="[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4">
             <Feed
                 {...upvotedFeedProps}
-                className="mb-4"
+                className="[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4"
                 feedContainerRef={ref}
               />
-            </div>
           </FeedContext.Provider>
         );
       default:
@@ -217,7 +249,7 @@ export const Activity = ({ user }: ActivityProps): ReactElement => {
     // Replies tab: just show title (no horizontal scroll arrows)
     if (selectedTabIndex === 1) {
       return (
-        <div className="mx-4 mb-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
+        <div className="mx-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
           {renderTitleContent()}
         </div>
       );
@@ -231,11 +263,11 @@ export const Activity = ({ user }: ActivityProps): ReactElement => {
     <div className="flex flex-col gap-3 overflow-hidden pt-6">
       {renderHeader()}
       {renderContent()}
-      {selectedTabIndex !== 1 && (
+      {shouldShowMoreButton && (
         <Link href={getUserPath(activityTabs[selectedTabIndex].path)} passHref>
           <Button
             tag="a"
-            variant={ButtonVariant.Tertiary}
+            variant={ButtonVariant.Subtle}
             className="w-full"
           >
             Show More

From cbc82f387b6b74324b309d26bb0769df9ae90360 Mon Sep 17 00:00:00 2001
From: NensiDosari <nensidosari97@gmail.com>
Date: Mon, 3 Nov 2025 14:47:04 +0100
Subject: [PATCH 12/16] fix: last commit

---
 .../{ProfileWidgets => }/AboutMe.spec.tsx     |   4 +-
 .../{ProfileWidgets => }/AboutMe.tsx          |  24 +-
 .../profile/components/Activity.helpers.tsx   | 219 ++++++++++++++
 .../features/profile/components/Activity.tsx  | 227 ++++++++++++++
 .../components/ProfileWidgets/Activity.tsx    | 280 ------------------
 .../layouts/ProfileLayout/index.tsx           |   8 +-
 .../webapp/hooks/useProfileSidebarCollapse.ts |  22 +-
 packages/webapp/pages/[userId]/index.tsx      |   4 +-
 8 files changed, 482 insertions(+), 306 deletions(-)
 rename packages/shared/src/features/profile/components/{ProfileWidgets => }/AboutMe.spec.tsx (97%)
 rename packages/shared/src/features/profile/components/{ProfileWidgets => }/AboutMe.tsx (89%)
 create mode 100644 packages/shared/src/features/profile/components/Activity.helpers.tsx
 create mode 100644 packages/shared/src/features/profile/components/Activity.tsx
 delete mode 100644 packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx

diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx b/packages/shared/src/features/profile/components/AboutMe.spec.tsx
similarity index 97%
rename from packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
rename to packages/shared/src/features/profile/components/AboutMe.spec.tsx
index 81126650c3..b306477c91 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.spec.tsx
+++ b/packages/shared/src/features/profile/components/AboutMe.spec.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { PublicProfile } from '../../../../lib/user';
+import type { PublicProfile } from '../../../lib/user';
 import { AboutMe } from './AboutMe';
-import { getLogContextStatic } from '../../../../contexts/LogContext';
+import { getLogContextStatic } from '../../../contexts/LogContext';
 
 const LogContext = getLogContextStatic();
 
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx b/packages/shared/src/features/profile/components/AboutMe.tsx
similarity index 89%
rename from packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
rename to packages/shared/src/features/profile/components/AboutMe.tsx
index 29fbb20180..01ef62d4da 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/AboutMe.tsx
+++ b/packages/shared/src/features/profile/components/AboutMe.tsx
@@ -1,18 +1,18 @@
 import type { ReactElement } from 'react';
 import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
-import type { PublicProfile } from '../../../../lib/user';
-import Markdown from '../../../../components/Markdown';
+import type { PublicProfile } from '../../../lib/user';
+import Markdown from '../../../components/Markdown';
 import {
   Button,
   ButtonSize,
   ButtonVariant,
-} from '../../../../components/buttons/Button';
+} from '../../../components/buttons/Button';
 import {
   Typography,
   TypographyType,
   TypographyColor,
-} from '../../../../components/typography/Typography';
+} from '../../../components/typography/Typography';
 import {
   BlueskyIcon,
   CodePenIcon,
@@ -26,14 +26,14 @@ import {
   ThreadsIcon,
   TwitterIcon,
   YoutubeIcon,
-} from '../../../../components/icons';
-import { IconSize } from '../../../../components/Icon';
-import { SimpleTooltip } from '../../../../components/tooltips/SimpleTooltip';
-import { ExpandableContent } from '../../../../components/ExpandableContent';
-import { useLogContext } from '../../../../contexts/LogContext';
-import { combinedClicks } from '../../../../lib/click';
-import { LogEvent, TargetType } from '../../../../lib/log';
-import { anchorDefaultRel } from '../../../../lib/strings';
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { SimpleTooltip } from '../../../components/tooltips/SimpleTooltip';
+import { ExpandableContent } from '../../../components/ExpandableContent';
+import { useLogContext } from '../../../contexts/LogContext';
+import { combinedClicks } from '../../../lib/click';
+import { LogEvent, TargetType } from '../../../lib/log';
+import { anchorDefaultRel } from '../../../lib/strings';
 
 export interface AboutMeProps {
   user: PublicProfile;
diff --git a/packages/shared/src/features/profile/components/Activity.helpers.tsx b/packages/shared/src/features/profile/components/Activity.helpers.tsx
new file mode 100644
index 0000000000..678a460669
--- /dev/null
+++ b/packages/shared/src/features/profile/components/Activity.helpers.tsx
@@ -0,0 +1,219 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import { MyProfileEmptyScreen } from '../../../components/profile/MyProfileEmptyScreen';
+import { ProfileEmptyScreen } from '../../../components/profile/ProfileEmptyScreen';
+import { link } from '../../../lib/links';
+import {
+  OtherFeedPage,
+  generateQueryKey,
+  RequestKey,
+} from '../../../lib/query';
+import type { FeedProps } from '../../../components/Feed';
+import {
+  AUTHOR_FEED_QUERY,
+  USER_UPVOTED_FEED_QUERY,
+} from '../../../graphql/feed';
+
+export type ActivityTab = { id: string; title: string; path: string };
+
+export interface FeedData {
+  pages?: Array<{
+    page?: {
+      edges?: Array<unknown>;
+    };
+  }>;
+}
+
+export interface CommentsData {
+  page?: {
+    edges?: Array<unknown>;
+  };
+}
+
+export enum ActivityTabIndex {
+  Posts = 0,
+  Replies = 1,
+  Upvoted = 2,
+}
+
+export const activityTabs: ActivityTab[] = [
+  {
+    id: 'posts',
+    title: 'Posts',
+    path: '/posts',
+  },
+  {
+    id: 'replies',
+    title: 'Replies',
+    path: '/replies',
+  },
+  {
+    id: 'upvoted',
+    title: 'Upvoted',
+    path: '/upvoted',
+  },
+];
+
+export const COMMENT_CLASS_NAME = {
+  container: 'rounded-none border-0 border-b',
+  commentBox: {
+    container: 'relative border-0 rounded-none',
+  },
+} as const;
+
+export const MIN_ITEMS_FOR_SHOW_MORE = 3;
+export const HORIZONTAL_FEED_CLASSES =
+  '[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4';
+export const TAB_ITEMS = activityTabs.map((tab) => ({ label: tab.title }));
+
+export const ACTIVITY_QUERY_KEYS = {
+  posts: (userId: string) => ['author', userId] as const,
+  upvoted: (userId: string) => [OtherFeedPage.UserUpvoted, userId] as const,
+  comments: (userId: string) =>
+    generateQueryKey(RequestKey.UserComments, null, userId),
+} as const;
+
+export const getItemCount = (
+  data: FeedData | CommentsData | undefined,
+  tabIndex: ActivityTabIndex,
+): number => {
+  if (!data) {
+    return 0;
+  }
+
+  switch (tabIndex) {
+    case ActivityTabIndex.Posts:
+    case ActivityTabIndex.Upvoted:
+      return (data as FeedData)?.pages?.[0]?.page?.edges?.length ?? 0;
+    case ActivityTabIndex.Replies:
+      return (data as CommentsData)?.page?.edges?.length ?? 0;
+    default:
+      return 0;
+  }
+};
+
+export const getUserPath = (
+  username: string | undefined,
+  userId: string | undefined,
+  path: string,
+): string => {
+  const userIdentifier = username || userId;
+  return `/${userIdentifier}${path}`;
+};
+
+export const renderEmptyScreen = (
+  tabIndex: ActivityTabIndex,
+  isSameUser: boolean,
+  userName: string,
+): ReactElement | null => {
+  if (isSameUser) {
+    switch (tabIndex) {
+      case ActivityTabIndex.Posts:
+        return (
+          <MyProfileEmptyScreen
+            className="tablet:px-6 items-center px-4 py-6 text-center"
+            text="Hardest part of being a developer? Where do we start – it's everything. Go on, share with us your best rant."
+            cta="New post"
+            buttonProps={{ tag: 'a', href: link.post.create }}
+          />
+        );
+      case ActivityTabIndex.Upvoted:
+        return (
+          <MyProfileEmptyScreen
+            className="tablet:px-6 items-center px-4 py-6 text-center"
+            text="Trapped in endless meetings? Make the most of It - Find posts you love and upvote away!"
+            cta="Explore posts"
+            buttonProps={{ tag: 'a', href: '/' }}
+          />
+        );
+      case ActivityTabIndex.Replies:
+        return (
+          <MyProfileEmptyScreen
+            className="tablet:px-6 items-center px-4 py-6 text-center"
+            text="All tests have passed on the first try and you have no idea why? Time for a break. Browse the feed and join a discussion!"
+            cta="Explore posts"
+            buttonProps={{ tag: 'a', href: '/' }}
+          />
+        );
+      default:
+        return null;
+    }
+  }
+
+  // Other user's profile
+  switch (tabIndex) {
+    case ActivityTabIndex.Posts:
+      return (
+        <ProfileEmptyScreen
+          title={`${userName} hasn't posted yet`}
+          text="Once they do, those posts will show up here."
+        />
+      );
+    case ActivityTabIndex.Upvoted:
+      return (
+        <ProfileEmptyScreen
+          title={`${userName} hasn't upvoted yet`}
+          text="Once they do, those posts will show up here."
+        />
+      );
+    case ActivityTabIndex.Replies:
+      return (
+        <ProfileEmptyScreen
+          title={`${userName} hasn't replied to any post yet`}
+          text="Once they do, those replies will show up here."
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+export const useActivityFeedProps = (
+  userId: string,
+  isSameUser: boolean,
+  userName: string,
+) => {
+  const postsFeedProps: FeedProps<unknown> = useMemo(
+    () => ({
+      feedName: OtherFeedPage.Author,
+      feedQueryKey: ACTIVITY_QUERY_KEYS.posts(userId),
+      query: AUTHOR_FEED_QUERY,
+      variables: {
+        userId,
+      },
+      disableAds: true,
+      allowFetchMore: false,
+      pageSize: 10,
+      isHorizontal: true,
+      emptyScreen: renderEmptyScreen(
+        ActivityTabIndex.Posts,
+        isSameUser,
+        userName,
+      ),
+    }),
+    [userId, isSameUser, userName],
+  );
+
+  const upvotedFeedProps: FeedProps<unknown> = useMemo(
+    () => ({
+      feedName: OtherFeedPage.UserUpvoted,
+      feedQueryKey: ACTIVITY_QUERY_KEYS.upvoted(userId),
+      query: USER_UPVOTED_FEED_QUERY,
+      variables: {
+        userId,
+      },
+      disableAds: true,
+      allowFetchMore: false,
+      pageSize: 10,
+      isHorizontal: true,
+      emptyScreen: renderEmptyScreen(
+        ActivityTabIndex.Upvoted,
+        isSameUser,
+        userName,
+      ),
+    }),
+    [userId, isSameUser, userName],
+  );
+
+  return { postsFeedProps, upvotedFeedProps };
+};
diff --git a/packages/shared/src/features/profile/components/Activity.tsx b/packages/shared/src/features/profile/components/Activity.tsx
new file mode 100644
index 0000000000..7548fa04ac
--- /dev/null
+++ b/packages/shared/src/features/profile/components/Activity.tsx
@@ -0,0 +1,227 @@
+import type { ReactElement, RefObject } from 'react';
+import React, { useContext, useState, useMemo, useCallback } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { PublicProfile } from '../../../lib/user';
+import { Button, ButtonVariant } from '../../../components/buttons/Button';
+import type { FeedProps } from '../../../components/Feed';
+import Feed from '../../../components/Feed';
+import AuthContext from '../../../contexts/AuthContext';
+import CommentFeed from '../../../components/CommentFeed';
+import { USER_COMMENTS_QUERY } from '../../../graphql/comments';
+import { Origin } from '../../../lib/log';
+import { useHorizontalScrollHeader } from '../../../components/HorizontalScroll/useHorizontalScrollHeader';
+import {
+  TypographyType,
+  Typography,
+} from '../../../components/typography/Typography';
+import Link from '../../../components/utilities/Link';
+import FeedContext from '../../../contexts/FeedContext';
+import TabList from '../../../components/tabs/TabList';
+import { ButtonSize } from '../../../components/buttons/common';
+import type { FeedData, CommentsData } from './Activity.helpers';
+import {
+  ActivityTabIndex,
+  activityTabs,
+  COMMENT_CLASS_NAME,
+  MIN_ITEMS_FOR_SHOW_MORE,
+  HORIZONTAL_FEED_CLASSES,
+  TAB_ITEMS,
+  ACTIVITY_QUERY_KEYS,
+  getItemCount,
+  getUserPath,
+  renderEmptyScreen,
+  useActivityFeedProps,
+} from './Activity.helpers';
+
+type ActivityProps = {
+  user: PublicProfile;
+};
+
+interface ActivityHeaderProps {
+  selectedTab: string;
+  onTabClick: (label: string) => void;
+}
+
+const ActivityHeader = ({
+  selectedTab,
+  onTabClick,
+}: ActivityHeaderProps): ReactElement => {
+  return (
+    <div className="flex flex-col gap-3">
+      <Typography type={TypographyType.Body} bold>
+        Activity
+      </Typography>
+      <TabList
+        items={TAB_ITEMS}
+        active={selectedTab}
+        onClick={onTabClick}
+        className={{ item: '!p-0 !pr-3', indicator: 'hidden' }}
+      />
+    </div>
+  );
+};
+
+interface HorizontalFeedWithContextProps {
+  feedProps: FeedProps<unknown>;
+  feedRef: RefObject<HTMLElement>;
+}
+
+const HorizontalFeedWithContext = ({
+  feedProps,
+  feedRef,
+}: HorizontalFeedWithContextProps): ReactElement => {
+  const currentFeedSettings = useContext(FeedContext);
+
+  const feedContextValue = useMemo(() => {
+    const numCards = 3;
+
+    return {
+      ...currentFeedSettings,
+      numCards: {
+        eco: numCards,
+        roomy: numCards,
+        cozy: numCards,
+      },
+    };
+  }, [currentFeedSettings]);
+
+  return (
+    <FeedContext.Provider value={feedContextValue}>
+      <Feed
+        {...feedProps}
+        className={HORIZONTAL_FEED_CLASSES}
+        feedContainerRef={feedRef as RefObject<HTMLDivElement>}
+      />
+    </FeedContext.Provider>
+  );
+};
+
+export const Activity = ({ user }: ActivityProps): ReactElement | null => {
+  const [selectedTab, setSelectedTab] = useState<string>(activityTabs[0].title);
+  const { user: loggedUser } = useContext(AuthContext);
+  const isSameUser = user && loggedUser?.id === user.id;
+  const userId = user?.id;
+
+  const selectedTabIndex = useMemo(
+    () => activityTabs.findIndex((tab) => tab.title === selectedTab),
+    [selectedTab],
+  );
+
+  const { postsFeedProps, upvotedFeedProps } = useActivityFeedProps(
+    userId,
+    isSameUser,
+    user?.name ?? 'User',
+  );
+
+  const { data: postsData } = useQuery<FeedData>({
+    queryKey: ACTIVITY_QUERY_KEYS.posts(userId),
+    enabled: false,
+  });
+
+  const { data: upvotedData } = useQuery<FeedData>({
+    queryKey: ACTIVITY_QUERY_KEYS.upvoted(userId),
+    enabled: false,
+  });
+
+  const { data: commentsData } = useQuery<CommentsData>({
+    queryKey: ACTIVITY_QUERY_KEYS.comments(userId),
+    enabled: false,
+  });
+
+  const shouldShowMoreButton = useMemo(() => {
+    let data: FeedData | CommentsData | undefined;
+
+    if (selectedTabIndex === ActivityTabIndex.Posts) {
+      data = postsData;
+    } else if (selectedTabIndex === ActivityTabIndex.Replies) {
+      data = commentsData;
+    } else {
+      data = upvotedData;
+    }
+
+    const itemCount = getItemCount(data, selectedTabIndex);
+    return itemCount > MIN_ITEMS_FOR_SHOW_MORE;
+  }, [selectedTabIndex, postsData, commentsData, upvotedData]);
+
+  const handleTabClick = useCallback((label: string) => {
+    setSelectedTab(label);
+  }, []);
+
+  const { ref, header: horizontalHeader } = useHorizontalScrollHeader({
+    title: (
+      <ActivityHeader selectedTab={selectedTab} onTabClick={handleTabClick} />
+    ),
+    className: '!items-end !m-0',
+    buttonSize: ButtonSize.Small,
+  });
+
+  const renderContent = () => {
+    switch (selectedTabIndex) {
+      case ActivityTabIndex.Posts:
+        return (
+          <HorizontalFeedWithContext feedProps={postsFeedProps} feedRef={ref} />
+        );
+      case ActivityTabIndex.Replies:
+        return (
+          <CommentFeed
+            feedQueryKey={ACTIVITY_QUERY_KEYS.comments(userId)}
+            query={USER_COMMENTS_QUERY}
+            logOrigin={Origin.Profile}
+            variables={{ userId }}
+            emptyScreen={renderEmptyScreen(
+              ActivityTabIndex.Replies,
+              isSameUser,
+              user?.name ?? 'User',
+            )}
+            commentClassName={COMMENT_CLASS_NAME}
+          />
+        );
+      case ActivityTabIndex.Upvoted:
+        return (
+          <HorizontalFeedWithContext
+            feedProps={upvotedFeedProps}
+            feedRef={ref}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const renderHeader = () => {
+    if (selectedTabIndex !== ActivityTabIndex.Replies) {
+      return horizontalHeader;
+    }
+
+    return (
+      <div className="laptop:w-full flex min-h-10 w-auto flex-row items-center justify-between">
+        <ActivityHeader selectedTab={selectedTab} onTabClick={handleTabClick} />
+      </div>
+    );
+  };
+
+  if (!userId) {
+    return null;
+  }
+
+  return (
+    <div className="mb-4 flex flex-col gap-3 overflow-hidden pt-6">
+      {renderHeader()}
+      {renderContent()}
+      {shouldShowMoreButton && (
+        <Link
+          href={getUserPath(
+            user?.username,
+            user?.id,
+            activityTabs[selectedTabIndex].path,
+          )}
+          passHref
+        >
+          <Button tag="a" variant={ButtonVariant.Subtle} className="w-full">
+            Show More
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
deleted file mode 100644
index c5c1d335f1..0000000000
--- a/packages/shared/src/features/profile/components/ProfileWidgets/Activity.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-import type { ReactElement } from 'react';
-import React, { useContext, useState, useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import type { PublicProfile } from '../../../../lib/user';
-import {
-  Button,
-  ButtonVariant,
-} from '../../../../components/buttons/Button';
-import type { FeedProps } from '../../../../components/Feed';
-import Feed from '../../../../components/Feed';
-import { AUTHOR_FEED_QUERY, USER_UPVOTED_FEED_QUERY } from '../../../../graphql/feed';
-import { OtherFeedPage } from '../../../../lib/query';
-import { MyProfileEmptyScreen } from '../../../../components/profile/MyProfileEmptyScreen';
-import { ProfileEmptyScreen } from '../../../../components/profile/ProfileEmptyScreen';
-import AuthContext from '../../../../contexts/AuthContext';
-import CommentFeed from '../../../../components/CommentFeed';
-import { USER_COMMENTS_QUERY } from '../../../../graphql/comments';
-import { Origin } from '../../../../lib/log';
-import { generateQueryKey, RequestKey } from '../../../../lib/query';
-import { link } from '../../../../lib/links';
-import { useHorizontalScrollHeader } from '../../../../components/HorizontalScroll/useHorizontalScrollHeader';
-import { TypographyType, Typography } from '../../../../components/typography/Typography';
-import Link from '../../../../components/utilities/Link';
-import FeedContext from '../../../../contexts/FeedContext';
-import TabList from '../../../../components/tabs/TabList';
-import { ButtonSize } from '../../../../components/buttons/common';
-
-export type ActivityTab = { id: string; title: string; path: string };
-
-export const activityTabs: ActivityTab[] = [
-  {
-    id: 'posts',
-    title: 'Posts',
-    path: '/posts',
-  },
-  {
-    id: 'replies',
-    title: 'Replies',
-    path: '/replies',
-  },
-  {
-    id: 'upvoted',
-    title: 'Upvoted',
-    path: '/upvoted',
-  },
-];
-
-interface ActivityProps {
-  user: PublicProfile;
-}
-
-const commentClassName = {
-  container: 'rounded-none border-0 border-b',
-  commentBox: {
-    container: 'relative border-0 rounded-none',
-  },
-};
-
-export const Activity = ({ user }: ActivityProps): ReactElement => {
-  const [selectedTab, setSelectedTab] = useState<string>(activityTabs[0].title);
-  const { user: loggedUser } = useContext(AuthContext);
-  const currentFeedSettings = useContext(FeedContext);
-  const isSameUser = user && loggedUser?.id === user.id;
-  const userId = user?.id;
-  
-  const selectedTabIndex = activityTabs.findIndex(tab => tab.title === selectedTab);
-
-  const getUserPath = (path: string) => {
-    const username = user?.username || user?.id;
-    return `/${username}${path}`;
-  };
-
-  const feedContextValue = useMemo(() => {
-    // We'll show 3 cards to make sure enough cards show on most screens
-    const numCards = 3;
-    
-    return {
-      ...currentFeedSettings,
-      numCards: {
-        eco: numCards,
-        roomy: numCards,
-        cozy: numCards,
-      },
-    };
-  }, [currentFeedSettings]);
-
-  const postsFeedProps: FeedProps<unknown> = {
-    feedName: OtherFeedPage.Author,
-    feedQueryKey: ['author', userId],
-    query: AUTHOR_FEED_QUERY,
-    variables: {
-      userId,
-    },
-    disableAds: true,
-    allowFetchMore: false,
-    pageSize: 10,
-    isHorizontal: true,
-    emptyScreen: isSameUser ? (
-      <MyProfileEmptyScreen
-        className="items-center px-4 py-6 text-center tablet:px-6"
-        text="Hardest part of being a developer? Where do we start – it's everything. Go on, share with us your best rant."
-        cta="New post"
-        buttonProps={{ tag: 'a', href: link.post.create }}
-      />
-    ) : (
-      <ProfileEmptyScreen
-        title={`${user?.name ?? 'User'} hasn't posted yet`}
-        text="Once they do, those posts will show up here."
-      />
-    ),
-  };
-
-  const upvotedFeedProps: FeedProps<unknown> = {
-    feedName: OtherFeedPage.UserUpvoted,
-    feedQueryKey: ['user_upvoted', userId],
-    query: USER_UPVOTED_FEED_QUERY,
-    variables: {
-      userId,
-    },
-    disableAds: true,
-    allowFetchMore: false,
-    pageSize: 10,
-    isHorizontal: true,
-    emptyScreen: isSameUser ? (
-      <MyProfileEmptyScreen
-        className="items-center px-4 py-6 text-center tablet:px-6"
-        text="Trapped in endless meetings? Make the most of It - Find posts you love and upvote away!"
-        cta="Explore posts"
-        buttonProps={{ tag: 'a', href: '/' }}
-      />
-    ) : (
-      <ProfileEmptyScreen
-        title={`${user?.name ?? 'User'} hasn't upvoted yet`}
-        text="Once they do, those posts will show up here."
-      />
-    ),
-  };
-
-  const commentsEmptyScreen = isSameUser ? (
-    <MyProfileEmptyScreen
-      className="items-center px-4 py-6 text-center tablet:px-6"
-      text="All tests have passed on the first try and you have no idea why? Time for a break. Browse the feed and join a discussion!"
-      cta="Explore posts"
-      buttonProps={{ tag: 'a', href: '/' }}
-    />
-  ) : (
-    <ProfileEmptyScreen
-      title={`${user?.name ?? 'User'} hasn't replied to any post yet`}
-      text="Once they do, those replies will show up here."
-    />
-  );
-
-  // Query to check if there are more than 3 posts
-  const { data: postsData } = useQuery({
-    queryKey: ['author', userId],
-    enabled: false, // Don't auto-fetch, Feed component handles fetching
-  });
-
-  // Query to check if there are more than 3 upvoted posts
-  const { data: upvotedData } = useQuery({
-    queryKey: [OtherFeedPage.UserUpvoted, userId],
-    enabled: false,
-  });
-
-  // Query to check if there are more than 3 comments
-  const { data: commentsData } = useQuery({
-    queryKey: generateQueryKey(RequestKey.UserComments, null, userId),
-    enabled: false,
-  });
-
-  // Check if current tab has more than 3 items to show "Show More" button
-  const shouldShowMoreButton = useMemo(() => {
-    const MIN_ITEMS = 3;
-    
-    switch (selectedTabIndex) {
-      case 0: // Posts
-        return ((postsData as any)?.pages?.[0]?.page?.edges?.length ?? 0) > MIN_ITEMS;
-      case 1: // Replies
-        return ((commentsData as any)?.page?.edges?.length ?? 0) > MIN_ITEMS;
-      case 2: // Upvoted
-        return ((upvotedData as any)?.pages?.[0]?.page?.edges?.length ?? 0) > MIN_ITEMS;
-      default:
-        return false;
-    }
-  }, [selectedTabIndex, postsData, commentsData, upvotedData]);
-
-  // Render custom title content (shared across all tabs)
-  const renderTitleContent = () => (
-    <div className="flex flex-col gap-3">
-      <Typography type={TypographyType.Body} bold>
-        Activity
-      </Typography>
-        <TabList
-          items={activityTabs.map(tab => ({ label: tab.title }))}
-          active={selectedTab}
-          onClick={(label) => setSelectedTab(label)}
-          className={{ item: '!p-0 !pr-3', indicator: 'hidden' }}
-        />
-    </div>
-  );
-
-  // Use horizontal scroll header (with navigation arrows) for Posts/Upvoted
-  const { ref, header: horizontalHeader } = useHorizontalScrollHeader({
-    title: renderTitleContent(),
-    className: '!items-end !mb-0',
-    buttonSize: ButtonSize.Small,
-  });
-
-  const renderContent = () => {
-    switch (selectedTabIndex) {
-      case 0: // Posts
-        return (
-          <FeedContext.Provider value={feedContextValue}>
-              <Feed
-                {...postsFeedProps}
-                className="[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4"
-                feedContainerRef={ref}
-              />
-          </FeedContext.Provider>
-        );
-      case 1: // Replies
-        return (
-          <CommentFeed
-            feedQueryKey={generateQueryKey(RequestKey.UserComments, null, userId)}
-            query={USER_COMMENTS_QUERY}
-            logOrigin={Origin.Profile}
-            variables={{ userId }}
-            emptyScreen={commentsEmptyScreen}
-            commentClassName={commentClassName}
-          />
-        );
-      case 2: // Upvoted
-        return (
-          <FeedContext.Provider value={feedContextValue}>
-            <Feed
-                {...upvotedFeedProps}
-                className="[&_.grid]:!auto-cols-[17rem] [&_.grid]:gap-4"
-                feedContainerRef={ref}
-              />
-          </FeedContext.Provider>
-        );
-      default:
-        return null;
-    }
-  };
-
-  // Conditionally render header based on tab type
-  const renderHeader = () => {
-    // Replies tab: just show title (no horizontal scroll arrows)
-    if (selectedTabIndex === 1) {
-      return (
-        <div className="mx-4 flex min-h-10 w-auto flex-row items-center justify-between laptop:mx-0 laptop:w-full">
-          {renderTitleContent()}
-        </div>
-      );
-    }
-    
-    // Posts/Upvoted tabs: show title + horizontal scroll arrows
-    return horizontalHeader;
-  };
-
-  return (
-    <div className="flex flex-col gap-3 overflow-hidden pt-6">
-      {renderHeader()}
-      {renderContent()}
-      {shouldShowMoreButton && (
-        <Link href={getUserPath(activityTabs[selectedTabIndex].path)} passHref>
-          <Button
-            tag="a"
-            variant={ButtonVariant.Subtle}
-            className="w-full"
-          >
-            Show More
-          </Button>
-        </Link>
-      )}
-    </div>
-  );
-};
-
diff --git a/packages/webapp/components/layouts/ProfileLayout/index.tsx b/packages/webapp/components/layouts/ProfileLayout/index.tsx
index 4bde4cd74d..7c523516a7 100644
--- a/packages/webapp/components/layouts/ProfileLayout/index.tsx
+++ b/packages/webapp/components/layouts/ProfileLayout/index.tsx
@@ -111,12 +111,14 @@ export default function ProfileLayout({
   }
 
   return (
-    <div className="profile-page m-auto flex w-full laptopL:max-w-6xl laptop:max-w-5xl flex-col pb-12 tablet:pb-0 laptop:min-h-page laptop:flex-row laptop:gap-4 laptop:p-4 laptop:pb-6">
+    <div className="profile-page m-auto flex w-full flex-col pb-12 tablet:pb-0 laptop:min-h-page laptop:max-w-5xl laptop:flex-row laptop:gap-4 laptop:p-4 laptop:pb-6 laptopL:max-w-6xl">
       <Head>
         <link rel="preload" as="image" href={user.image} />
       </Head>
-      <main className="relative flex flex-1 flex-col laptopL:max-w-3xl laptop:max-w-2xl">{children}</main>
-      <aside className="hidden min-w-0 laptop:flex laptop:max-w-80 laptop:flex-col laptop:flex-shrink">
+      <main className="relative flex flex-1 flex-col laptop:max-w-2xl laptopL:max-w-3xl">
+        {children}
+      </main>
+      <aside className="hidden min-w-0 laptop:flex laptop:max-w-80 laptop:flex-shrink laptop:flex-col">
         <ProfileWidgets
           user={user}
           userStats={userStats}
diff --git a/packages/webapp/hooks/useProfileSidebarCollapse.ts b/packages/webapp/hooks/useProfileSidebarCollapse.ts
index 390014b92c..cf2a4d0738 100644
--- a/packages/webapp/hooks/useProfileSidebarCollapse.ts
+++ b/packages/webapp/hooks/useProfileSidebarCollapse.ts
@@ -5,10 +5,11 @@ const COLLAPSE_BREAKPOINT = 1360;
 
 /**
  * Auto-collapses sidebar on profile pages when screen is below 1360px
-**/
+ * */
 
 export const useProfileSidebarCollapse = () => {
-  const { sidebarExpanded, toggleSidebarExpanded, loadedSettings } = useSettingsContext();
+  const { sidebarExpanded, toggleSidebarExpanded, loadedSettings } =
+    useSettingsContext();
   // Refs to avoid stale closures and unnecessary effect re-runs
   const sidebarExpandedRef = useRef(sidebarExpanded);
   const toggleSidebarExpandedRef = useRef(toggleSidebarExpanded);
@@ -21,10 +22,14 @@ export const useProfileSidebarCollapse = () => {
 
   // Auto-collapse on mount (runs once when settings load)
   useEffect(() => {
-    if (!loadedSettings) return;
+    if (!loadedSettings) {
+      return;
+    }
+
+    const isSmallScreen = window.matchMedia(
+      `(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`,
+    ).matches;
 
-    const isSmallScreen = window.matchMedia(`(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`).matches;
-    
     if (isSmallScreen && sidebarExpanded) {
       toggleSidebarExpanded();
     }
@@ -33,7 +38,9 @@ export const useProfileSidebarCollapse = () => {
 
   // Handle resize from big to small (runs once on mount, listener persists)
   useEffect(() => {
-    const mediaQuery = window.matchMedia(`(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`);
+    const mediaQuery = window.matchMedia(
+      `(max-width: ${COLLAPSE_BREAKPOINT - 1}px)`,
+    );
 
     const handleBreakpointChange = (e: MediaQueryListEvent) => {
       // Use refs to access current values without re-creating listener
@@ -43,6 +50,7 @@ export const useProfileSidebarCollapse = () => {
     };
 
     mediaQuery.addEventListener('change', handleBreakpointChange);
-    return () => mediaQuery.removeEventListener('change', handleBreakpointChange);
+    return () =>
+      mediaQuery.removeEventListener('change', handleBreakpointChange);
   }, []); // Empty deps = runs once, listener stays active
 };
diff --git a/packages/webapp/pages/[userId]/index.tsx b/packages/webapp/pages/[userId]/index.tsx
index 6de4eb05e4..16030ac90c 100644
--- a/packages/webapp/pages/[userId]/index.tsx
+++ b/packages/webapp/pages/[userId]/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
-import { AboutMe } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/AboutMe';
-import { Activity } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/Activity';
+import { AboutMe } from '@dailydotdev/shared/src/features/profile/components/AboutMe';
+import { Activity } from '@dailydotdev/shared/src/features/profile/components/Activity';
 import { useProfile } from '@dailydotdev/shared/src/hooks/profile/useProfile';
 import { useActions, useJoinReferral } from '@dailydotdev/shared/src/hooks';
 import { NextSeo } from 'next-seo';

From 1adb0cecc876fb35ce391d196ecf06c012f26e5f Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Tue, 4 Nov 2025 14:54:26 +0200
Subject: [PATCH 13/16] fix: merge conflicts

---
 .../profile/components/experience/UserExperiencesList.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx b/packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx
index 483e35bcc1..9c1c8981f3 100644
--- a/packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx
+++ b/packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx
@@ -47,7 +47,7 @@ export function UserExperienceList<T extends UserExperience>({
   }
 
   return (
-    <div className="flex flex-col gap-3 pt-4">
+    <div className="flex flex-col gap-3 py-4">
       <Typography tag={TypographyTag.H2} type={TypographyType.Body} bold>
         {title}
       </Typography>

From 78afcf8c1fa1bd4385bf52a6a6f2724fcc07f04a Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Tue, 4 Nov 2025 15:22:33 +0200
Subject: [PATCH 14/16] fix: lint issue

---
 .../src/components/HorizontalScroll/HorizontalScroll.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx
index d64a48d3c6..c793d03f08 100644
--- a/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx
+++ b/packages/shared/src/components/HorizontalScroll/HorizontalScroll.tsx
@@ -23,7 +23,12 @@ function HorizontalScrollComponent(
   const titleId = `horizontal-scroll-title-${id}`;
   const { ref, header } = useHorizontalScrollHeader({
     ...scrollProps,
-    title: { ...scrollProps?.title, id: titleId },
+    title:
+      scrollProps.title &&
+      typeof scrollProps.title === 'object' &&
+      'copy' in scrollProps.title
+        ? { ...scrollProps.title, id: titleId }
+        : scrollProps.title,
   });
 
   return (

From 6ca1dc2e586534c33fe604a3cde7fcdf952536e1 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Tue, 4 Nov 2025 15:34:16 +0200
Subject: [PATCH 15/16] fix: linting

---
 .../src/features/profile/components/Activity.helpers.tsx    | 6 +++---
 .../shared/src/features/profile/components/Activity.tsx     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/features/profile/components/Activity.helpers.tsx b/packages/shared/src/features/profile/components/Activity.helpers.tsx
index 678a460669..dd1fe0df04 100644
--- a/packages/shared/src/features/profile/components/Activity.helpers.tsx
+++ b/packages/shared/src/features/profile/components/Activity.helpers.tsx
@@ -111,7 +111,7 @@ export const renderEmptyScreen = (
       case ActivityTabIndex.Posts:
         return (
           <MyProfileEmptyScreen
-            className="tablet:px-6 items-center px-4 py-6 text-center"
+            className="items-center px-4 py-6 text-center tablet:px-6"
             text="Hardest part of being a developer? Where do we start – it's everything. Go on, share with us your best rant."
             cta="New post"
             buttonProps={{ tag: 'a', href: link.post.create }}
@@ -120,7 +120,7 @@ export const renderEmptyScreen = (
       case ActivityTabIndex.Upvoted:
         return (
           <MyProfileEmptyScreen
-            className="tablet:px-6 items-center px-4 py-6 text-center"
+            className="items-center px-4 py-6 text-center tablet:px-6"
             text="Trapped in endless meetings? Make the most of It - Find posts you love and upvote away!"
             cta="Explore posts"
             buttonProps={{ tag: 'a', href: '/' }}
@@ -129,7 +129,7 @@ export const renderEmptyScreen = (
       case ActivityTabIndex.Replies:
         return (
           <MyProfileEmptyScreen
-            className="tablet:px-6 items-center px-4 py-6 text-center"
+            className="items-center px-4 py-6 text-center tablet:px-6"
             text="All tests have passed on the first try and you have no idea why? Time for a break. Browse the feed and join a discussion!"
             cta="Explore posts"
             buttonProps={{ tag: 'a', href: '/' }}
diff --git a/packages/shared/src/features/profile/components/Activity.tsx b/packages/shared/src/features/profile/components/Activity.tsx
index 7548fa04ac..bb7be2f684 100644
--- a/packages/shared/src/features/profile/components/Activity.tsx
+++ b/packages/shared/src/features/profile/components/Activity.tsx
@@ -194,7 +194,7 @@ export const Activity = ({ user }: ActivityProps): ReactElement | null => {
     }
 
     return (
-      <div className="laptop:w-full flex min-h-10 w-auto flex-row items-center justify-between">
+      <div className="flex min-h-10 w-auto flex-row items-center justify-between laptop:w-full">
         <ActivityHeader selectedTab={selectedTab} onTabClick={handleTabClick} />
       </div>
     );

From 49d2ae01a9d7afcace6a9c35abf7742bb479c076 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Tue, 4 Nov 2025 15:54:16 +0200
Subject: [PATCH 16/16] fix: test

---
 .../shared/src/features/profile/components/AboutMe.spec.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/shared/src/features/profile/components/AboutMe.spec.tsx b/packages/shared/src/features/profile/components/AboutMe.spec.tsx
index b306477c91..f500884eb9 100644
--- a/packages/shared/src/features/profile/components/AboutMe.spec.tsx
+++ b/packages/shared/src/features/profile/components/AboutMe.spec.tsx
@@ -7,14 +7,8 @@ import { getLogContextStatic } from '../../../contexts/LogContext';
 
 const LogContext = getLogContextStatic();
 
-const mockCopyLink = jest.fn();
 const mockLogEvent = jest.fn();
 
-// Mock useCopyLink hook
-jest.mock('../../../../hooks/useCopy', () => ({
-  useCopyLink: () => [jest.fn(), mockCopyLink],
-}));
-
 beforeEach(() => {
   jest.clearAllMocks();
   // Mock window for client-side check