From d55958cb2107c1c51b141c9563e11003809bb703 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 2 Feb 2026 08:41:14 +0200
Subject: [PATCH 1/9] feat: improve feed layout with full-width cards and
 reduced gaps

- Remove max-width constraints on feed container for full-width layout
- Reduce default grid gap from gap-8 (32px) to gap-4 (16px)
- Unify page padding to laptop:p-10 on all sides

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/Feed.module.css            | 8 ++------
 packages/shared/src/components/feeds/FeedContainer.tsx    | 4 +++-
 .../shared/src/components/layout/PageWrapperLayout.tsx    | 2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/shared/src/components/Feed.module.css b/packages/shared/src/components/Feed.module.css
index 89c074beb5..4ebfb00288 100644
--- a/packages/shared/src/components/Feed.module.css
+++ b/packages/shared/src/components/Feed.module.css
@@ -2,14 +2,10 @@
   grid-template-columns: 100%;
 }
 .container {
-  @screen laptopL {
-    max-width: calc(20rem * var(--num-cards) + var(--feed-gap) * (var(--num-cards) - 1));
-  }
+  max-width: 100%;
 }
 .cards {
-  @screen mobileL {
-    max-width: calc(20rem * var(--num-cards) + var(--feed-gap) * (var(--num-cards) - 1));
-  }
+  max-width: 100%;
 }
 
 .feedRow {
diff --git a/packages/shared/src/components/feeds/FeedContainer.tsx b/packages/shared/src/components/feeds/FeedContainer.tsx
index ea3ba62fe4..2925cbe4d2 100644
--- a/packages/shared/src/components/feeds/FeedContainer.tsx
+++ b/packages/shared/src/components/feeds/FeedContainer.tsx
@@ -69,7 +69,9 @@ const cardListClass = {
 export const getFeedGapPx = {
   'gap-2': 8,
   'gap-3': 12,
+  'gap-4': 16,
   'gap-5': 20,
+  'gap-6': 24,
   'gap-8': 32,
   'gap-12': 48,
   'gap-14': 56,
@@ -87,7 +89,7 @@ export const gapClass = ({
   if (isFeedLayoutList) {
     return '';
   }
-  return isList ? listGaps[space] ?? 'gap-2' : gridGaps[space] ?? 'gap-8';
+  return isList ? listGaps[space] ?? 'gap-2' : gridGaps[space] ?? 'gap-4';
 };
 
 const cardClass = ({
diff --git a/packages/shared/src/components/layout/PageWrapperLayout.tsx b/packages/shared/src/components/layout/PageWrapperLayout.tsx
index f8abfe8a99..e10ca3c603 100644
--- a/packages/shared/src/components/layout/PageWrapperLayout.tsx
+++ b/packages/shared/src/components/layout/PageWrapperLayout.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 
-export const pageMainClassNames = 'tablet:p-4 laptop:px-10 laptop:py-5';
+export const pageMainClassNames = 'tablet:p-4 laptop:p-10';
 
 export const PageWrapperLayout = ({
   children,

From 2a30e578f9eb184e98beb98be7ac3c753d5ae5b1 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 2 Feb 2026 12:18:32 +0200
Subject: [PATCH 2/9] fix: header, sidebar UI and animations

- Make header fixed instead of sticky for YouTube-like behavior
- Add hidden scrollbar that shows on hover
- Improve sidebar collapse animation with synchronized 300ms transitions
- Adjust sidebar padding and font sizes for consistency
- Make plus icon always visible in section headers

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/MainLayout.tsx |  4 +-
 .../shared/src/components/feeds/FeedNav.tsx   | 43 +---------
 .../components/layout/MainLayoutHeader.tsx    |  4 +-
 .../shared/src/components/sidebar/Section.tsx | 79 +++++++++++++------
 .../src/components/sidebar/SidebarDesktop.tsx | 37 ++++++---
 .../src/components/sidebar/SidebarItem.tsx    | 11 ++-
 .../components/sidebar/SidebarMenuIcon.tsx    | 31 +++-----
 .../shared/src/components/sidebar/common.tsx  | 26 +++---
 .../sidebar/sections/BookmarkSection.tsx      | 22 ++----
 .../sidebar/sections/CustomFeedSection.tsx    | 26 +++---
 .../sidebar/sections/MainSection.tsx          | 19 +++--
 .../sidebar/sections/NetworkSection.tsx       | 22 ++----
 packages/shared/src/styles/base.css           | 21 ++++-
 13 files changed, 178 insertions(+), 167 deletions(-)

diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx
index 7c130bee0e..5db49bce10 100644
--- a/packages/shared/src/components/MainLayout.tsx
+++ b/packages/shared/src/components/MainLayout.tsx
@@ -196,14 +196,14 @@ function MainLayoutComponent({
       />
       <main
         className={classNames(
-          'flex flex-col',
+          'flex flex-col pt-14 laptop:pt-16 transition-[padding] duration-300 ease-in-out',
           showSidebar && 'tablet:pl-16 laptop:pl-11',
           className,
           isAuthReady &&
             !isScreenCentered &&
             sidebarExpanded &&
             'laptop:!pl-60',
-          isBannerAvailable && 'laptop:pt-8',
+          isBannerAvailable && 'laptop:pt-24',
         )}
       >
         {isAuthReady && showSidebar && (
diff --git a/packages/shared/src/components/feeds/FeedNav.tsx b/packages/shared/src/components/feeds/FeedNav.tsx
index 81a480c03d..e52421fd12 100644
--- a/packages/shared/src/components/feeds/FeedNav.tsx
+++ b/packages/shared/src/components/feeds/FeedNav.tsx
@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import type { ReactElement } from 'react';
-import React, { useMemo, useState, useTransition } from 'react';
+import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { Tab, TabContainer } from '../tabs/TabContainer';
 import { useActiveFeedNameContext } from '../../contexts';
 import useActiveNav from '../../hooks/useActiveNav';
-import { useEventListener, useFeeds, useViewSize, ViewSize } from '../../hooks';
+import { useFeeds, useViewSize, ViewSize } from '../../hooks';
 import usePersistentContext from '../../hooks/usePersistentContext';
 import {
   algorithmsList,
@@ -31,7 +31,6 @@ import { SharedFeedPage } from '../utilities';
 import PlusMobileEntryBanner from '../banners/PlusMobileEntryBanner';
 import { TargetType } from '../../lib/log';
 import usePlusEntry from '../../hooks/usePlusEntry';
-import { useAlertsContext } from '../../contexts/AlertContext';
 
 enum FeedNavTab {
   ForYou = 'For you',
@@ -52,17 +51,12 @@ const StickyNavIconWrapper = classed(
   'sticky flex h-14 pt-1 -translate-y-16 items-center justify-end bg-gradient-to-r from-transparent via-background-default via-40% to-background-default pr-4',
 );
 
-const MIN_SCROLL_BEFORE_HIDING = 60;
-
 function FeedNav(): ReactElement {
   const router = useRouter();
-  const [, startTransition] = useTransition();
-  const [isHeaderVisible, setIsHeaderVisible] = useState(true);
   const { feedName } = useActiveFeedNameContext();
   const { sortingEnabled } = useSettingsContext();
   const { isSortableFeed } = useFeedName({ feedName });
   const { home, bookmarks } = useActiveNav(feedName);
-  const { alerts } = useAlertsContext();
   const isMobile = useViewSize(ViewSize.MobileL);
   const [selectedAlgo, setSelectedAlgo] = usePersistentContext(
     DEFAULT_ALGORITHM_KEY,
@@ -82,8 +76,6 @@ function FeedNav(): ReactElement {
     isMobile &&
     ((sortingEnabled && isSortableFeed) || feedName === SharedFeedPage.Custom);
 
-  const hasOpportunityAlert = !!alerts.opportunityId;
-
   const urlToTab: Record<string, FeedNavTab> = useMemo(() => {
     const customFeeds = sortedFeeds.reduce((acc, { node: feed }) => {
       const isEditingFeed =
@@ -127,45 +119,16 @@ function FeedNav(): ReactElement {
     isCustomDefaultFeed,
   ]);
 
-  const previousScrollY = React.useRef(0);
-
-  useEventListener(globalThis, 'scroll', () => {
-    // when scrolled down we should hide the header
-    // when scrolled up, we should bring it back
-    const { scrollY } = window;
-    const shouldHeaderBeVisible = scrollY < previousScrollY.current;
-
-    previousScrollY.current = scrollY;
-
-    if (shouldHeaderBeVisible === isHeaderVisible) {
-      return;
-    }
-
-    if (!shouldHeaderBeVisible && scrollY < MIN_SCROLL_BEFORE_HIDING) {
-      return;
-    }
-
-    startTransition(() => {
-      setIsHeaderVisible(shouldHeaderBeVisible);
-    });
-  });
   const shouldRenderNav = home || (isMobile && bookmarks);
   if (!shouldRenderNav || router?.pathname?.startsWith('/posts/[id]')) {
     return null;
   }
 
-  const headerTransitionClasses =
-    isMobile && hasOpportunityAlert
-      ? '-translate-y-[7.5rem] duration-[800ms]'
-      : '-translate-y-26 duration-[800ms]';
-
   return (
     <div
       className={classNames(
-        'sticky top-0 z-header w-full transition-transform tablet:pl-16',
+        'fixed top-0 z-header w-full bg-background-default tablet:pl-16',
         scrollClassName,
-        isHeaderVisible && 'translate-y-0 duration-200',
-        !isHeaderVisible && headerTransitionClasses,
       )}
     >
       {isMobile && <MobileFeedActions />}
diff --git a/packages/shared/src/components/layout/MainLayoutHeader.tsx b/packages/shared/src/components/layout/MainLayoutHeader.tsx
index ecb3331fe5..e2c0a30466 100644
--- a/packages/shared/src/components/layout/MainLayoutHeader.tsx
+++ b/packages/shared/src/components/layout/MainLayoutHeader.tsx
@@ -76,7 +76,7 @@ function MainLayoutHeader({
   if (loadedSettings && !isLaptop) {
     if (isSearchPage) {
       return (
-        <div className="sticky top-0 z-header w-full bg-background-default tablet:pl-16">
+        <div className="fixed top-0 z-header w-full bg-background-default tablet:pl-16">
           <RenderSearchPanel />
           {!isSearch && <MobileExploreHeader path={feedName as string} />}
         </div>
@@ -93,7 +93,7 @@ function MainLayoutHeader({
   return (
     <header
       className={classNames(
-        'sticky top-0 z-header h-14 flex-row content-center items-center justify-center gap-3 border-b border-border-subtlest-tertiary px-4 py-3 tablet:px-8 laptop:left-0 laptop:h-16 laptop:w-full laptop:px-4',
+        'fixed top-0 z-header h-14 flex-row content-center items-center justify-center gap-3 border-b border-border-subtlest-tertiary bg-background-default px-4 py-3 tablet:px-8 laptop:left-0 laptop:h-16 laptop:w-full laptop:px-4',
         isMobileProfile ? 'hidden laptop:flex' : 'flex',
         hasBanner && 'laptop:top-8',
         isSearchPage && 'mb-16 laptop:mb-0',
diff --git a/packages/shared/src/components/sidebar/Section.tsx b/packages/shared/src/components/sidebar/Section.tsx
index 7a33d1a9b6..4a4a5fc458 100644
--- a/packages/shared/src/components/sidebar/Section.tsx
+++ b/packages/shared/src/components/sidebar/Section.tsx
@@ -4,12 +4,12 @@ import React, { useRef } from 'react';
 import type { ItemInnerProps, SidebarMenuItem } from './common';
 import { NavHeader, NavSection } from './common';
 import { SidebarItem } from './SidebarItem';
-import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
-import { ArrowIcon } from '../icons';
+import { ArrowIcon, PlusIcon } from '../icons';
 import type { SettingsFlags } from '../../graphql/settings';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { isNullOrUndefined } from '../../lib/func';
 import useSidebarRendered from '../../hooks/useSidebarRendered';
+import { SimpleTooltip } from '../tooltips/SimpleTooltip';
 
 export interface SectionCommonProps
   extends Pick<ItemInnerProps, 'shouldShowLabel'> {
@@ -24,6 +24,7 @@ interface SectionProps extends SectionCommonProps {
   items: SidebarMenuItem[];
   isItemsButton: boolean;
   isAlwaysOpenOnMobile?: boolean;
+  onAdd?: () => void;
 }
 
 export function Section({
@@ -36,6 +37,7 @@ export function Section({
   className,
   flag,
   isAlwaysOpenOnMobile,
+  onAdd,
 }: SectionProps): ReactElement {
   const { flags, updateFlag } = useSettingsContext();
   const { sidebarRendered } = useSidebarRendered();
@@ -48,31 +50,63 @@ export function Section({
     isVisible.current = !isVisible.current;
   };
 
-  return (
-    <NavSection className={className}>
-      {title && (
-        <NavHeader
+  const headerContent = (
+    <div
+      className={classNames(
+        'group/section flex w-full items-center justify-between px-2 py-1.5 transition-opacity duration-300',
+        sidebarExpanded ? 'opacity-100' : 'pointer-events-none opacity-0',
+      )}
+    >
+      <button
+        type="button"
+        onClick={toggleFlag}
+        aria-label={`Toggle ${title}`}
+        aria-expanded={isVisible.current}
+        className="flex items-center gap-1 rounded-6 transition-colors hover:text-text-primary"
+      >
+        <span className="typo-callout text-text-quaternary">{title}</span>
+        <ArrowIcon
           className={classNames(
-            'hidden justify-between laptop:flex',
-            sidebarExpanded ? 'px-3 opacity-100' : 'px-0 opacity-0',
+            'h-2.5 w-2.5 text-text-quaternary transition-transform duration-200',
+            isVisible.current ? 'rotate-180' : 'rotate-90',
           )}
+        />
+      </button>
+      {onAdd && (
+        <button
+          type="button"
+          onClick={onAdd}
+          aria-label={`Add to ${title}`}
+          className="flex h-6 w-6 items-center justify-center rounded-6 text-text-tertiary transition-all hover:bg-surface-hover hover:text-text-primary"
         >
-          {title}
-          <Button
-            variant={ButtonVariant.Tertiary}
-            onClick={toggleFlag}
-            size={ButtonSize.XSmall}
-            aria-label={`Toggle ${title}`}
-            icon={
-              <ArrowIcon
-                className={isVisible.current ? 'rotate-360' : 'rotate-180'}
-              />
-            }
-          />
+          <PlusIcon className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+
+  return (
+    <NavSection className={classNames('mt-1', className)}>
+      {title && (
+        <NavHeader className="hidden laptop:flex">
+          {sidebarExpanded ? (
+            headerContent
+          ) : (
+            <SimpleTooltip content={title} placement="right">
+              <div className="mx-auto my-1 h-px w-5 rounded-full bg-border-subtlest-tertiary" />
+            </SimpleTooltip>
+          )}
         </NavHeader>
       )}
-      {(isVisible.current || shouldAlwaysBeVisible) &&
-        items.map((item) => (
+      <div
+        className={classNames(
+          'flex flex-col overflow-hidden transition-all duration-200',
+          isVisible.current || shouldAlwaysBeVisible
+            ? 'max-h-[2000px] opacity-100'
+            : 'max-h-0 opacity-0',
+        )}
+      >
+        {items.map((item) => (
           <SidebarItem
             key={`${item.title}-${item.path}`}
             item={item}
@@ -81,6 +115,7 @@ export function Section({
             shouldShowLabel={shouldShowLabel}
           />
         ))}
+      </div>
     </NavSection>
   );
 }
diff --git a/packages/shared/src/components/sidebar/SidebarDesktop.tsx b/packages/shared/src/components/sidebar/SidebarDesktop.tsx
index 38851c1850..4fdef24aa5 100644
--- a/packages/shared/src/components/sidebar/SidebarDesktop.tsx
+++ b/packages/shared/src/components/sidebar/SidebarDesktop.tsx
@@ -10,7 +10,7 @@ import { CustomFeedSection } from './sections/CustomFeedSection';
 import { DiscoverSection } from './sections/DiscoverSection';
 import { SidebarMenuIcon } from './SidebarMenuIcon';
 import { CreatePostButton } from '../post/write';
-import { ButtonSize } from '../buttons/Button';
+import { ButtonSize, ButtonVariant } from '../buttons/Button';
 import { BookmarkSection } from './sections/BookmarkSection';
 import { NetworkSection } from './sections/NetworkSection';
 
@@ -57,38 +57,53 @@ export const SidebarDesktop = ({
       <SidebarScrollWrapper>
         <Nav>
           <SidebarMenuIcon />
-          <CreatePostButton
+          {/* Primary Action */}
+          <div
             className={classNames(
-              'mb-4 !flex whitespace-nowrap',
-              sidebarExpanded ? 'mx-4' : 'mx-auto',
+              'mb-2 transition-[padding] duration-300',
+              sidebarExpanded ? 'px-2' : 'px-1',
             )}
-            compact={!sidebarExpanded}
-            size={sidebarExpanded ? ButtonSize.Small : ButtonSize.XSmall}
-            showIcon
-          />
+          >
+            <CreatePostButton
+              className={classNames(
+                '!flex w-full whitespace-nowrap',
+                sidebarExpanded ? 'justify-start' : 'justify-center',
+              )}
+              compact={!sidebarExpanded}
+              size={sidebarExpanded ? ButtonSize.Small : ButtonSize.XSmall}
+              variant={ButtonVariant.Primary}
+              showIcon
+            />
+          </div>
+
+          {/* Primary Navigation - Always visible */}
           <MainSection
             {...defaultRenderSectionProps}
             onNavTabClick={onNavTabClick}
             isItemsButton={isNavButtons}
           />
+
+          {/* User Content Sections */}
           <CustomFeedSection
             {...defaultRenderSectionProps}
             onNavTabClick={onNavTabClick}
-            title="Custom feeds"
+            title="Feeds"
             isItemsButton={false}
           />
           <NetworkSection
             {...defaultRenderSectionProps}
-            title="Network"
+            title="Squads"
             isItemsButton={isNavButtons}
             key="network-section"
           />
           <BookmarkSection
             {...defaultRenderSectionProps}
-            title="Bookmarks"
+            title="Saved"
             isItemsButton={false}
             key="bookmark-section"
           />
+
+          {/* Discovery Section */}
           <DiscoverSection
             {...defaultRenderSectionProps}
             title="Discover"
diff --git a/packages/shared/src/components/sidebar/SidebarItem.tsx b/packages/shared/src/components/sidebar/SidebarItem.tsx
index 23f7b15831..fe8214ba9c 100644
--- a/packages/shared/src/components/sidebar/SidebarItem.tsx
+++ b/packages/shared/src/components/sidebar/SidebarItem.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import React, { useContext } from 'react';
+import classNames from 'classnames';
 import { ClickableNavItem } from './ClickableNavItem';
 import type { AuthTriggersType } from '../../lib/auth';
 import type { SidebarMenuItem } from './common';
@@ -27,7 +28,15 @@ export const SidebarItem = ({
   };
 
   return (
-    <NavItem active={isActive(item)} ref={item.navItemRef} color={item.color}>
+    <NavItem
+      active={isActive(item)}
+      ref={item.navItemRef}
+      color={item.color}
+      className={classNames(
+        'mx-1 rounded-10',
+        !shouldShowLabel && 'justify-center',
+      )}
+    >
       <ClickableNavItem
         item={item}
         showLogin={
diff --git a/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx b/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
index 85fc8ddce8..ae6e59c6fd 100644
--- a/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
+++ b/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
@@ -1,11 +1,6 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
-import {
-  Typography,
-  TypographyColor,
-  TypographyType,
-} from '../typography/Typography';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { SidebarArrowLeft, SidebarArrowRight } from '../icons';
 import { useSettingsContext } from '../../contexts/SettingsContext';
@@ -24,35 +19,27 @@ export const SidebarMenuIcon = (): ReactElement => {
   return (
     <div
       className={classNames(
-        'flex h-12 items-center',
-        sidebarExpanded ? undefined : 'justify-center',
+        'flex h-9 items-center justify-between px-2 transition-[padding,justify-content] duration-300',
+        !sidebarExpanded && 'justify-center px-1',
       )}
     >
-      <Typography
-        type={TypographyType.Callout}
-        color={TypographyColor.Quaternary}
-        bold
+      <span
         className={classNames(
-          'transition-all',
-          sidebarExpanded
-            ? 'w-auto pl-4 opacity-100 delay-150'
-            : 'hidden opacity-0',
+          'typo-callout text-text-quaternary transition-opacity duration-300 whitespace-nowrap overflow-hidden',
+          sidebarExpanded ? 'opacity-100' : 'opacity-0 w-0',
         )}
       >
         Menu
-      </Typography>
+      </span>
       <Tooltip
         side="right"
-        content={`${sidebarExpanded ? 'Close' : 'Open'} sidebar`}
+        content={`${sidebarExpanded ? 'Collapse' : 'Expand'} sidebar`}
       >
         <Button
           variant={ButtonVariant.Tertiary}
-          size={ButtonSize.Small}
+          size={ButtonSize.XSmall}
           onClick={logAndToggleSidebarExpanded}
-          className={classNames(
-            'z-1',
-            sidebarExpanded ? 'ml-auto mr-2' : undefined,
-          )}
+          className="text-text-tertiary hover:text-text-primary"
           icon={sidebarExpanded ? <SidebarArrowLeft /> : <SidebarArrowRight />}
         />
       </Tooltip>
diff --git a/packages/shared/src/components/sidebar/common.tsx b/packages/shared/src/components/sidebar/common.tsx
index 4af7dd80f0..93232759d7 100644
--- a/packages/shared/src/components/sidebar/common.tsx
+++ b/packages/shared/src/components/sidebar/common.tsx
@@ -48,25 +48,25 @@ interface NavItemProps {
 }
 
 export const navBtnClass =
-  'flex flex-1 items-center pl-2 laptop:pl-0 pr-5 laptop:pr-3 h-10 laptop:h-8';
+  'flex flex-1 items-center pl-2 laptop:pl-0 pr-5 laptop:pr-3 h-10 laptop:h-9';
 export const SidebarAside = classed(
   'aside',
-  'flex flex-col z-sidebarOverlay laptop:z-sidebar laptop:-translate-x-0 left-0 bg-background-default border-r border-border-subtlest-tertiary transition-[width,transform] duration-300 ease-in-out group fixed top-0  h-full ',
+  'flex flex-col z-sidebarOverlay laptop:z-sidebar laptop:-translate-x-0 left-0 bg-background-default border-r border-border-subtlest-tertiary transition-[width,transform] duration-300 ease-in-out group fixed top-0 h-full',
 );
 export const SidebarScrollWrapper = classed(
   'div',
   'flex overflow-x-hidden overflow-y-auto flex-col h-full no-scrollbar',
 );
-export const Nav = classed('nav', 'mb-4');
-export const NavSection = classed('ul', 'mt-0 laptop:mt-4');
+export const Nav = classed('nav', 'flex flex-col pt-1 pb-3');
+export const NavSection = classed('ul', 'flex flex-col');
 export const NavHeader = classed(
   'li',
-  'typo-callout text-text-quaternary h-8 flex items-center font-bold transition-opacity',
+  'h-9 flex items-center transition-opacity duration-300',
 );
 
 const RawNavItem = classed(
   'li',
-  'flex items-center typo-callout hover:bg-theme-active',
+  'flex items-center typo-callout relative transition-colors duration-150',
 );
 
 export const ListIcon = ({ Icon }: ListIconProps): ReactElement => (
@@ -80,7 +80,7 @@ const ItemInnerIcon = ({
   alert,
   icon,
   active,
-  iconClassName = 'relative px-3',
+  iconClassName = 'relative flex items-center justify-center w-9 h-9',
 }: ItemInnerIconProps) => {
   return (
     <span className={iconClassName}>
@@ -100,7 +100,7 @@ const ItemInnerIconTooltip = ({
   <SimpleTooltip {...tooltip} content={title} placement="right">
     <span
       className={classNames(
-        'relative px-3',
+        'relative flex items-center justify-center w-9 h-9',
         tooltip.visible !== undefined && 'pointer-events-none',
       )}
     >
@@ -133,19 +133,19 @@ export const ItemInner = ({
       )}
       <span
         className={classNames(
-          'flex-1 truncate text-left transition-opacity',
-          shouldShowLabel ? 'opacity-100 delay-150' : 'opacity-0',
+          'flex-1 truncate text-left transition-[opacity,width] duration-300 overflow-hidden whitespace-nowrap',
+          shouldShowLabel ? 'opacity-100' : 'w-0 opacity-0',
           item.titleClassName,
         )}
         title={item.title}
       >
         {item.title}
       </span>
-      {item.rightIcon && (
+      {shouldShowLabel && item.rightIcon && (
         <ItemInnerIcon
           {...item}
           icon={item.rightIcon}
-          iconClassName="relative"
+          iconClassName="relative flex items-center justify-center"
         />
       )}
     </>
@@ -164,7 +164,7 @@ export const NavItem = forwardRef<HTMLElement, NavItemProps>(
         className={classNames(
           className,
           color || baseClasses,
-          active && 'bg-theme-active',
+          active ? 'bg-surface-hover' : 'hover:bg-surface-hover',
         )}
       >
         {children}
diff --git a/packages/shared/src/components/sidebar/sections/BookmarkSection.tsx b/packages/shared/src/components/sidebar/sections/BookmarkSection.tsx
index 38185ebe63..9cf1cc10bd 100644
--- a/packages/shared/src/components/sidebar/sections/BookmarkSection.tsx
+++ b/packages/shared/src/components/sidebar/sections/BookmarkSection.tsx
@@ -1,8 +1,8 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import type { SidebarMenuItem } from '../common';
 import { ListIcon } from '../common';
-import { ArrowIcon, BookmarkIcon, BriefIcon, PlusIcon } from '../../icons';
+import { ArrowIcon, BookmarkIcon, BriefIcon } from '../../icons';
 import { Section } from '../Section';
 import { briefingUrl, webappUrl } from '../../../lib/constants';
 import { SidebarSettingsFlags } from '../../../graphql/settings';
@@ -31,10 +31,7 @@ export const BookmarkSection = ({
   const isLaptop = useViewSize(ViewSize.Laptop);
   const rightIcon = !isLaptop && (() => <ArrowIcon className="rotate-90" />);
 
-  const onAddFolderClick = (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
-  ) => {
-    event.preventDefault();
+  const handleAddFolder = useCallback(() => {
     openModal({
       type: LazyModal.BookmarkFolder,
       props: {
@@ -44,7 +41,7 @@ export const BookmarkSection = ({
         },
       },
     });
-  };
+  }, [openModal, closeModal, createFolder]);
 
   const menuItems: SidebarMenuItem[] = [
     briefUIFeatureValue && {
@@ -89,16 +86,6 @@ export const BookmarkSection = ({
       requiresLogin: true,
       rightIcon,
     })),
-    {
-      icon: () => (
-        <div className="rounded-6 bg-background-subtle">
-          <PlusIcon aria-label="Add" />
-        </div>
-      ),
-      title: 'New folder',
-      requiresLogin: true,
-      action: onAddFolderClick,
-    },
   ].filter(Boolean);
 
   return (
@@ -108,6 +95,7 @@ export const BookmarkSection = ({
       isItemsButton={isItemsButton}
       flag={SidebarSettingsFlags.BookmarksExpanded}
       isAlwaysOpenOnMobile
+      onAdd={handleAddFolder}
     />
   );
 };
diff --git a/packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx b/packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx
index f05605521b..64a3abd66c 100644
--- a/packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx
+++ b/packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx
@@ -1,7 +1,8 @@
 import type { ReactElement } from 'react';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useRouter } from 'next/router';
 import type { SidebarMenuItem } from '../common';
-import { HashtagIcon, PlusIcon, StarIcon } from '../../icons';
+import { HashtagIcon, StarIcon } from '../../icons';
 import { Section } from '../Section';
 import { webappUrl } from '../../../lib/constants';
 import { useFeeds } from '../../../hooks';
@@ -16,10 +17,15 @@ export const CustomFeedSection = ({
   onNavTabClick,
   ...defaultRenderSectionProps
 }: SidebarSectionProps): ReactElement => {
+  const router = useRouter();
   const { feeds } = useFeeds();
   const { defaultFeedId } = useCustomDefaultFeed();
   const sortedFeeds = useSortedFeeds({ edges: feeds?.edges });
 
+  const handleAddFeed = useCallback(() => {
+    router.push(`${webappUrl}feeds/new`);
+  }, [router]);
+
   const menuItems: SidebarMenuItem[] = useMemo(() => {
     const customFeeds =
       sortedFeeds.map((feed) => {
@@ -60,20 +66,7 @@ export const CustomFeedSection = ({
         };
       }) ?? [];
 
-    return [
-      ...customFeeds,
-      {
-        icon: () => (
-          <div className="rounded-6 bg-background-subtle">
-            <PlusIcon />
-          </div>
-        ),
-        title: 'Custom feed',
-        path: `${webappUrl}feeds/new`,
-        requiresLogin: true,
-        isForcedClickable: true,
-      },
-    ].filter(Boolean);
+    return customFeeds.filter(Boolean);
   }, [
     defaultRenderSectionProps.activePage,
     sortedFeeds,
@@ -87,6 +80,7 @@ export const CustomFeedSection = ({
       items={menuItems}
       isItemsButton={isItemsButton}
       flag={SidebarSettingsFlags.CustomFeedsExpanded}
+      onAdd={handleAddFeed}
     />
   );
 };
diff --git a/packages/shared/src/components/sidebar/sections/MainSection.tsx b/packages/shared/src/components/sidebar/sections/MainSection.tsx
index 62091202f5..a79b3cb8ea 100644
--- a/packages/shared/src/components/sidebar/sections/MainSection.tsx
+++ b/packages/shared/src/components/sidebar/sections/MainSection.tsx
@@ -6,6 +6,7 @@ import { ListIcon } from '../common';
 import {
   DevPlusIcon,
   EyeIcon,
+  HomeIcon,
   HotIcon,
   SquadIcon,
   YearInReviewIcon,
@@ -60,7 +61,14 @@ export const MainSection = ({
             <ProfilePicture size={ProfileImageSize.XSmall} user={user} />
           ),
         }
-      : undefined;
+      : {
+          title: 'Home',
+          path: '/',
+          action: () => onNavTabClick?.('/'),
+          icon: (active: boolean) => (
+            <ListIcon Icon={() => <HomeIcon secondary={active} />} />
+          ),
+        };
 
     const plusButton = !isPlus
       ? {
@@ -71,7 +79,8 @@ export const MainSection = ({
           path: plusUrl,
           isForcedLink: true,
           requiresLogin: true,
-          color: 'text-accent-avocado-default !bg-action-upvote-float mb-4',
+          color:
+            'text-accent-avocado-default hover:!bg-action-upvote-float !bg-action-upvote-float/50',
         }
       : undefined;
 
@@ -80,15 +89,13 @@ export const MainSection = ({
           icon: () => <ListIcon Icon={() => <YearInReviewIcon />} />,
           title: 'Your 2025 in Review',
           titleClassName:
-            'text-transparent bg-clip-text bg-gradient-to-b from-accent-lettuce-default to-accent-cabbage-default',
+            'text-transparent bg-clip-text bg-gradient-to-b from-accent-lettuce-default to-accent-cabbage-default font-bold',
           path: `${webappUrl}log`,
           isForcedLink: true,
         }
       : undefined;
 
     return [
-      plusButton,
-      yearInReview,
       myFeed,
       {
         title: 'Following',
@@ -117,6 +124,8 @@ export const MainSection = ({
         isForcedLink: true,
         requiresLogin: true,
       },
+      yearInReview,
+      plusButton,
     ].filter(Boolean);
   }, [
     ctaCopy,
diff --git a/packages/shared/src/components/sidebar/sections/NetworkSection.tsx b/packages/shared/src/components/sidebar/sections/NetworkSection.tsx
index 7d7b2a17da..ca3c246b2e 100644
--- a/packages/shared/src/components/sidebar/sections/NetworkSection.tsx
+++ b/packages/shared/src/components/sidebar/sections/NetworkSection.tsx
@@ -1,13 +1,8 @@
 import type { ReactElement } from 'react';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import type { SidebarMenuItem } from '../common';
 import { ListIcon } from '../common';
-import {
-  DefaultSquadIcon,
-  NewSquadIcon,
-  SourceIcon,
-  TimerIcon,
-} from '../../icons';
+import { DefaultSquadIcon, SourceIcon, TimerIcon } from '../../icons';
 import { Section } from '../Section';
 import { Origin } from '../../../lib/log';
 import { useSquadNavigation } from '../../../hooks';
@@ -30,6 +25,10 @@ export const NetworkSection = ({
     status: [SourcePostModerationStatus.Pending],
   });
 
+  const handleAddSquad = useCallback(() => {
+    openNewSquad({ origin: Origin.Sidebar });
+  }, [openNewSquad]);
+
   const menuItems: SidebarMenuItem[] = useMemo(() => {
     const squadItems =
       squads?.map((squad) => {
@@ -70,14 +69,8 @@ export const NetworkSection = ({
         isForcedLink: true,
       },
       ...squadItems,
-      {
-        icon: () => <NewSquadIcon />,
-        title: 'New Squad',
-        action: () => openNewSquad({ origin: Origin.Sidebar }),
-        requiresLogin: true,
-      },
     ].filter(Boolean);
-  }, [squads, isModeratorInAnySquad, count, openNewSquad]);
+  }, [squads, isModeratorInAnySquad, count]);
 
   return (
     <Section
@@ -85,6 +78,7 @@ export const NetworkSection = ({
       items={menuItems}
       isItemsButton={false}
       flag={SidebarSettingsFlags.SquadExpanded}
+      onAdd={handleAddSquad}
     />
   );
 };
diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css
index f8fd84d37c..c091f996cf 100644
--- a/packages/shared/src/styles/base.css
+++ b/packages/shared/src/styles/base.css
@@ -730,6 +730,7 @@ img.lazyload:not([src]) {
   }
 }
 
+/* Scrollbar - hidden by default, visible on hover (like default macOS behavior) */
 ::-webkit-scrollbar {
   width: 0.5rem;
   background-color: transparent;
@@ -741,17 +742,33 @@ img.lazyload:not([src]) {
 
 ::-webkit-scrollbar-thumb {
   border-radius: 0.25rem;
+  background: transparent;
+  transition: background 0.2s ease;
+}
+
+/* Show scrollbar thumb on hover of scrollable container */
+*:hover::-webkit-scrollbar-thumb {
   background: var(--theme-text-tertiary);
 }
 
-::-webkit-scrollbar-thumb:hover {
+*:hover::-webkit-scrollbar-thumb:hover {
   background: var(--theme-text-primary);
 }
 
-::-webkit-scrollbar-thumb:active {
+*:hover::-webkit-scrollbar-thumb:active {
   background: var(--theme-text-primary);
 }
 
+/* Firefox scrollbar - auto-hide behavior */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+*:hover {
+  scrollbar-color: var(--theme-text-tertiary) transparent;
+}
+
 summary {
   list-style: none;
 

From 4b0b365c5de05ed1bf8ad3336bfa5c13b2dcae75 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 3 Feb 2026 10:16:30 +0200
Subject: [PATCH 3/9] fix: resolve lint and test failures

- Add aria-label to sidebar toggle button for accessibility
- Fix section title opacity class for collapsed state
- Update test to match renamed "Squads" section

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/MainLayout.tsx |  2 +-
 .../shared/src/components/sidebar/Section.tsx | 20 +++++++++----------
 .../src/components/sidebar/Sidebar.spec.tsx   |  2 +-
 .../components/sidebar/SidebarMenuIcon.tsx    |  5 +++--
 .../shared/src/components/sidebar/common.tsx  |  4 ++--
 5 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx
index 5db49bce10..fa11dc460c 100644
--- a/packages/shared/src/components/MainLayout.tsx
+++ b/packages/shared/src/components/MainLayout.tsx
@@ -196,7 +196,7 @@ function MainLayoutComponent({
       />
       <main
         className={classNames(
-          'flex flex-col pt-14 laptop:pt-16 transition-[padding] duration-300 ease-in-out',
+          'flex flex-col pt-14 transition-[padding] duration-300 ease-in-out laptop:pt-16',
           showSidebar && 'tablet:pl-16 laptop:pl-11',
           className,
           isAuthReady &&
diff --git a/packages/shared/src/components/sidebar/Section.tsx b/packages/shared/src/components/sidebar/Section.tsx
index 4a4a5fc458..74e525c072 100644
--- a/packages/shared/src/components/sidebar/Section.tsx
+++ b/packages/shared/src/components/sidebar/Section.tsx
@@ -9,7 +9,6 @@ import type { SettingsFlags } from '../../graphql/settings';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { isNullOrUndefined } from '../../lib/func';
 import useSidebarRendered from '../../hooks/useSidebarRendered';
-import { SimpleTooltip } from '../tooltips/SimpleTooltip';
 
 export interface SectionCommonProps
   extends Pick<ItemInnerProps, 'shouldShowLabel'> {
@@ -64,7 +63,14 @@ export function Section({
         aria-expanded={isVisible.current}
         className="flex items-center gap-1 rounded-6 transition-colors hover:text-text-primary"
       >
-        <span className="typo-callout text-text-quaternary">{title}</span>
+        <span
+          className={classNames(
+            'text-text-quaternary typo-callout',
+            !sidebarExpanded && 'opacity-0',
+          )}
+        >
+          {title}
+        </span>
         <ArrowIcon
           className={classNames(
             'h-2.5 w-2.5 text-text-quaternary transition-transform duration-200',
@@ -88,15 +94,7 @@ export function Section({
   return (
     <NavSection className={classNames('mt-1', className)}>
       {title && (
-        <NavHeader className="hidden laptop:flex">
-          {sidebarExpanded ? (
-            headerContent
-          ) : (
-            <SimpleTooltip content={title} placement="right">
-              <div className="mx-auto my-1 h-px w-5 rounded-full bg-border-subtlest-tertiary" />
-            </SimpleTooltip>
-          )}
-        </NavHeader>
+        <NavHeader className="hidden laptop:flex">{headerContent}</NavHeader>
       )}
       <div
         className={classNames(
diff --git a/packages/shared/src/components/sidebar/Sidebar.spec.tsx b/packages/shared/src/components/sidebar/Sidebar.spec.tsx
index a79862683d..343671d3f0 100644
--- a/packages/shared/src/components/sidebar/Sidebar.spec.tsx
+++ b/packages/shared/src/components/sidebar/Sidebar.spec.tsx
@@ -105,7 +105,7 @@ it('should render the sidebar as open by default', async () => {
   renderComponent();
   const section = await screen.findByText('Discover');
   expect(section).toBeInTheDocument();
-  const sectionTwo = await screen.findByText('Network');
+  const sectionTwo = await screen.findByText('Squads');
   expect(sectionTwo).toBeInTheDocument();
 });
 
diff --git a/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx b/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
index ae6e59c6fd..9129d67cfc 100644
--- a/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
+++ b/packages/shared/src/components/sidebar/SidebarMenuIcon.tsx
@@ -25,8 +25,8 @@ export const SidebarMenuIcon = (): ReactElement => {
     >
       <span
         className={classNames(
-          'typo-callout text-text-quaternary transition-opacity duration-300 whitespace-nowrap overflow-hidden',
-          sidebarExpanded ? 'opacity-100' : 'opacity-0 w-0',
+          'overflow-hidden whitespace-nowrap text-text-quaternary transition-opacity duration-300 typo-callout',
+          sidebarExpanded ? 'opacity-100' : 'w-0 opacity-0',
         )}
       >
         Menu
@@ -41,6 +41,7 @@ export const SidebarMenuIcon = (): ReactElement => {
           onClick={logAndToggleSidebarExpanded}
           className="text-text-tertiary hover:text-text-primary"
           icon={sidebarExpanded ? <SidebarArrowLeft /> : <SidebarArrowRight />}
+          aria-label={sidebarExpanded ? 'Close sidebar' : 'Open sidebar'}
         />
       </Tooltip>
     </div>
diff --git a/packages/shared/src/components/sidebar/common.tsx b/packages/shared/src/components/sidebar/common.tsx
index 93232759d7..590860ef89 100644
--- a/packages/shared/src/components/sidebar/common.tsx
+++ b/packages/shared/src/components/sidebar/common.tsx
@@ -100,7 +100,7 @@ const ItemInnerIconTooltip = ({
   <SimpleTooltip {...tooltip} content={title} placement="right">
     <span
       className={classNames(
-        'relative flex items-center justify-center w-9 h-9',
+        'relative flex h-9 w-9 items-center justify-center',
         tooltip.visible !== undefined && 'pointer-events-none',
       )}
     >
@@ -133,7 +133,7 @@ export const ItemInner = ({
       )}
       <span
         className={classNames(
-          'flex-1 truncate text-left transition-[opacity,width] duration-300 overflow-hidden whitespace-nowrap',
+          'flex-1 overflow-hidden truncate whitespace-nowrap text-left transition-[opacity,width] duration-300',
           shouldShowLabel ? 'opacity-100' : 'w-0 opacity-0',
           item.titleClassName,
         )}

From 305951e0503b98b16ed158a20e3b77a8f802f123 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 3 Feb 2026 10:24:35 +0200
Subject: [PATCH 4/9] fix: resolve TypeScript build errors

- Cast isVisible.current to boolean for aria-expanded
- Remove unsupported variant prop from CreatePostButton

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/sidebar/Section.tsx        | 2 +-
 packages/shared/src/components/sidebar/SidebarDesktop.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/sidebar/Section.tsx b/packages/shared/src/components/sidebar/Section.tsx
index 74e525c072..0793ae4222 100644
--- a/packages/shared/src/components/sidebar/Section.tsx
+++ b/packages/shared/src/components/sidebar/Section.tsx
@@ -60,7 +60,7 @@ export function Section({
         type="button"
         onClick={toggleFlag}
         aria-label={`Toggle ${title}`}
-        aria-expanded={isVisible.current}
+        aria-expanded={!!isVisible.current}
         className="flex items-center gap-1 rounded-6 transition-colors hover:text-text-primary"
       >
         <span
diff --git a/packages/shared/src/components/sidebar/SidebarDesktop.tsx b/packages/shared/src/components/sidebar/SidebarDesktop.tsx
index 4fdef24aa5..e5a8554b96 100644
--- a/packages/shared/src/components/sidebar/SidebarDesktop.tsx
+++ b/packages/shared/src/components/sidebar/SidebarDesktop.tsx
@@ -10,7 +10,7 @@ import { CustomFeedSection } from './sections/CustomFeedSection';
 import { DiscoverSection } from './sections/DiscoverSection';
 import { SidebarMenuIcon } from './SidebarMenuIcon';
 import { CreatePostButton } from '../post/write';
-import { ButtonSize, ButtonVariant } from '../buttons/Button';
+import { ButtonSize } from '../buttons/Button';
 import { BookmarkSection } from './sections/BookmarkSection';
 import { NetworkSection } from './sections/NetworkSection';
 
@@ -71,7 +71,6 @@ export const SidebarDesktop = ({
               )}
               compact={!sidebarExpanded}
               size={sidebarExpanded ? ButtonSize.Small : ButtonSize.XSmall}
-              variant={ButtonVariant.Primary}
               showIcon
             />
           </div>

From 85431e6b9446341e2f901141d686352011896b71 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 3 Feb 2026 14:53:35 +0200
Subject: [PATCH 5/9] fix: improve feed layout and sidebar UX

- Remove density settings from appearance page (hardcode to 'eco')
- Debounce sidebar state change to prevent layout jump during animation
- Use proper link for 'Add to Feeds' button instead of router.push()

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/Feed.tsx       |  4 +-
 .../src/components/feeds/FeedContainer.tsx    | 10 ++---
 .../SearchResults/SearchResultsLayout.tsx     |  6 +--
 .../shared/src/components/sidebar/Section.tsx | 15 ++++++-
 .../sidebar/sections/CustomFeedSection.tsx    | 10 +----
 packages/shared/src/contexts/FeedContext.tsx  | 23 ++++++++--
 packages/webapp/pages/settings/appearance.tsx | 44 -------------------
 7 files changed, 45 insertions(+), 67 deletions(-)

diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx
index 2a583cf955..60a43f51d9 100644
--- a/packages/shared/src/components/Feed.tsx
+++ b/packages/shared/src/components/Feed.tsx
@@ -179,9 +179,9 @@ export default function Feed<T>({
   const currentSettings = useContext(FeedContext);
   const { user } = useContext(AuthContext);
   const { isFallback, query: routerQuery } = useRouter();
-  const { openNewTab, spaciness, loadedSettings } = useContext(SettingsContext);
+  const { openNewTab, loadedSettings } = useContext(SettingsContext);
   const { isListMode } = useFeedLayout();
-  const numCards = currentSettings.numCards[spaciness ?? 'eco'];
+  const numCards = currentSettings.numCards.eco;
   const isSquadFeed = feedName === OtherFeedPage.Squad;
   const { shouldUseListFeedLayout } = useFeedLayout();
   const trackedFeedFinish = useRef(false);
diff --git a/packages/shared/src/components/feeds/FeedContainer.tsx b/packages/shared/src/components/feeds/FeedContainer.tsx
index 2925cbe4d2..78387222b9 100644
--- a/packages/shared/src/components/feeds/FeedContainer.tsx
+++ b/packages/shared/src/components/feeds/FeedContainer.tsx
@@ -151,7 +151,7 @@ export const FeedContainer = ({
 }: FeedContainerProps): ReactElement => {
   const currentSettings = useContext(FeedContext);
   const { subject } = useToastNotification();
-  const { spaciness, loadedSettings } = useContext(SettingsContext);
+  const { loadedSettings } = useContext(SettingsContext);
   const { shouldUseListFeedLayout, isListMode } = useFeedLayout();
   const isLaptop = useViewSize(ViewSize.Laptop);
   const { feedName } = useActiveFeedNameContext();
@@ -159,7 +159,7 @@ export const FeedContainer = ({
     feedName,
   });
   const router = useRouter();
-  const numCards = currentSettings.numCards[spaciness ?? 'eco'];
+  const numCards = currentSettings.numCards.eco;
   const isList =
     (isHorizontal || isListMode) && !shouldUseListFeedLayout
       ? false
@@ -169,14 +169,14 @@ export const FeedContainer = ({
       gapClass({
         isList,
         isFeedLayoutList: shouldUseListFeedLayout,
-        space: spaciness,
+        space: 'eco',
       })
     ];
   const style = {
     '--num-cards': isHorizontal && isListMode && numCards >= 2 ? 2 : numCards,
     '--feed-gap': `${feedGapPx / 16}rem`,
   } as CSSProperties;
-  const cardContainerStyle = { ...getStyle(isList, spaciness) };
+  const cardContainerStyle = { ...getStyle(isList, 'eco') };
   const isFinder = router.pathname === '/search/posts';
   const isSearch = showSearch && !isFinder;
 
@@ -324,7 +324,7 @@ export const FeedContainer = ({
                 gapClass({
                   isList,
                   isFeedLayoutList: shouldUseListFeedLayout,
-                  space: spaciness,
+                  space: 'eco',
                 }),
                 cardClass({ isList, numberOfCards: numCards, isHorizontal }),
               )}
diff --git a/packages/shared/src/components/search/SearchResults/SearchResultsLayout.tsx b/packages/shared/src/components/search/SearchResults/SearchResultsLayout.tsx
index 1e66179170..08783a230a 100644
--- a/packages/shared/src/components/search/SearchResults/SearchResultsLayout.tsx
+++ b/packages/shared/src/components/search/SearchResults/SearchResultsLayout.tsx
@@ -1,5 +1,5 @@
 import type { PropsWithChildren, ReactElement } from 'react';
-import React, { useContext } from 'react';
+import React from 'react';
 import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import { PageWidgets } from '../../utilities';
@@ -12,7 +12,6 @@ import { webappUrl } from '../../../lib/constants';
 import { SearchResultsTags } from './SearchResultsTags';
 import { SearchResultsSources } from './SearchResultsSources';
 import { useSearchProviderSuggestions } from '../../../hooks/search';
-import SettingsContext from '../../../contexts/SettingsContext';
 import { gapClass } from '../../feeds/FeedContainer';
 import { useFeedLayout } from '../../../hooks';
 import { SearchResultsUsers } from './SearchResultsUsers';
@@ -26,7 +25,6 @@ export const SearchResultsLayout = (
 ): ReactElement => {
   const { children } = props;
   const { isListMode } = useFeedLayout();
-  const { spaciness } = useContext(SettingsContext);
   const { isSearchPageLaptop } = useSearchResultsLayout();
 
   const {
@@ -103,7 +101,7 @@ export const SearchResultsLayout = (
               gapClass({
                 isList: true,
                 isFeedLayoutList: false,
-                space: spaciness,
+                space: 'eco',
               }),
               isListMode
                 ? `flex flex-col`
diff --git a/packages/shared/src/components/sidebar/Section.tsx b/packages/shared/src/components/sidebar/Section.tsx
index 0793ae4222..7b916085cf 100644
--- a/packages/shared/src/components/sidebar/Section.tsx
+++ b/packages/shared/src/components/sidebar/Section.tsx
@@ -9,6 +9,7 @@ import type { SettingsFlags } from '../../graphql/settings';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { isNullOrUndefined } from '../../lib/func';
 import useSidebarRendered from '../../hooks/useSidebarRendered';
+import Link from '../utilities/Link';
 
 export interface SectionCommonProps
   extends Pick<ItemInnerProps, 'shouldShowLabel'> {
@@ -24,6 +25,7 @@ interface SectionProps extends SectionCommonProps {
   isItemsButton: boolean;
   isAlwaysOpenOnMobile?: boolean;
   onAdd?: () => void;
+  addHref?: string;
 }
 
 export function Section({
@@ -37,6 +39,7 @@ export function Section({
   flag,
   isAlwaysOpenOnMobile,
   onAdd,
+  addHref,
 }: SectionProps): ReactElement {
   const { flags, updateFlag } = useSettingsContext();
   const { sidebarRendered } = useSidebarRendered();
@@ -78,7 +81,17 @@ export function Section({
           )}
         />
       </button>
-      {onAdd && (
+      {addHref && (
+        <Link href={addHref}>
+          <a
+            aria-label={`Add to ${title}`}
+            className="flex h-6 w-6 items-center justify-center rounded-6 text-text-tertiary transition-all hover:bg-surface-hover hover:text-text-primary"
+          >
+            <PlusIcon className="h-4 w-4" />
+          </a>
+        </Link>
+      )}
+      {!addHref && onAdd && (
         <button
           type="button"
           onClick={onAdd}
diff --git a/packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx b/packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx
index 64a3abd66c..1cb8fb5c83 100644
--- a/packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx
+++ b/packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx
@@ -1,6 +1,5 @@
 import type { ReactElement } from 'react';
-import React, { useCallback, useMemo } from 'react';
-import { useRouter } from 'next/router';
+import React, { useMemo } from 'react';
 import type { SidebarMenuItem } from '../common';
 import { HashtagIcon, StarIcon } from '../../icons';
 import { Section } from '../Section';
@@ -17,15 +16,10 @@ export const CustomFeedSection = ({
   onNavTabClick,
   ...defaultRenderSectionProps
 }: SidebarSectionProps): ReactElement => {
-  const router = useRouter();
   const { feeds } = useFeeds();
   const { defaultFeedId } = useCustomDefaultFeed();
   const sortedFeeds = useSortedFeeds({ edges: feeds?.edges });
 
-  const handleAddFeed = useCallback(() => {
-    router.push(`${webappUrl}feeds/new`);
-  }, [router]);
-
   const menuItems: SidebarMenuItem[] = useMemo(() => {
     const customFeeds =
       sortedFeeds.map((feed) => {
@@ -80,7 +74,7 @@ export const CustomFeedSection = ({
       items={menuItems}
       isItemsButton={isItemsButton}
       flag={SidebarSettingsFlags.CustomFeedsExpanded}
-      onAdd={handleAddFeed}
+      addHref={`${webappUrl}feeds/new`}
     />
   );
 };
diff --git a/packages/shared/src/contexts/FeedContext.tsx b/packages/shared/src/contexts/FeedContext.tsx
index a2a743348b..a37ceda143 100644
--- a/packages/shared/src/contexts/FeedContext.tsx
+++ b/packages/shared/src/contexts/FeedContext.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement, PropsWithChildren } from 'react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { desktop, laptop, laptopL, laptopXL, tablet } from '../styles/media';
 import { useConditionalFeature, useMedia, usePlusSubscription } from '../hooks';
 import { useSettingsContext } from './SettingsContext';
@@ -9,6 +9,9 @@ import type { Spaciness } from '../graphql/settings';
 import { featureFeedAdTemplate } from '../lib/featureManagement';
 import type { FeedAdTemplate } from '../lib/feed';
 
+// Sidebar animation duration in ms (matches CSS transition in MainLayout)
+const SIDEBAR_TRANSITION_DURATION = 300;
+
 export type FeedContextData = {
   pageSize: number;
   numCards: Record<Spaciness, number>;
@@ -119,6 +122,19 @@ export function FeedLayoutProvider({
     shouldEvaluate: !isPlus,
   });
 
+  // Debounce sidebar expanded state to sync with sidebar CSS transition
+  // This prevents the feed layout from jumping mid-animation
+  const [debouncedSidebarExpanded, setDebouncedSidebarExpanded] =
+    useState(sidebarExpanded);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSidebarExpanded(sidebarExpanded);
+    }, SIDEBAR_TRANSITION_DURATION);
+
+    return () => clearTimeout(timer);
+  }, [sidebarExpanded]);
+
   const { feedSettings, defaultFeedSettings } = useMemo(() => {
     const enhancedFeedSettings = Object.entries(baseFeedSettings).reduce(
       (acc, [feedSettingsKey, feedSettingsValue]) => {
@@ -147,6 +163,7 @@ export function FeedLayoutProvider({
   }, [feedAdTemplateFeature.value]);
 
   // Generate the breakpoints for the feed settings
+  // Uses debounced sidebar state to sync layout change with sidebar animation
   const feedBreakpoints = useMemo(() => {
     const breakpoints = feedSettings.map((setting) =>
       setting.breakpoint.replace('@media ', ''),
@@ -156,7 +173,7 @@ export function FeedLayoutProvider({
       return breakpoints;
     }
 
-    if (sidebarExpanded) {
+    if (debouncedSidebarExpanded) {
       return breakpoints.map((breakpoint) =>
         replaceDigitsWithIncrement(breakpoint, sidebarOpenWidth),
       );
@@ -165,7 +182,7 @@ export function FeedLayoutProvider({
     return breakpoints.map((breakpoint) =>
       replaceDigitsWithIncrement(breakpoint, sidebarRenderedWidth),
     );
-  }, [feedSettings, sidebarExpanded, sidebarRendered]);
+  }, [feedSettings, debouncedSidebarExpanded, sidebarRendered]);
 
   const currentSettings = useMedia(
     feedBreakpoints,
diff --git a/packages/webapp/pages/settings/appearance.tsx b/packages/webapp/pages/settings/appearance.tsx
index efc58501f7..c44dfe302c 100644
--- a/packages/webapp/pages/settings/appearance.tsx
+++ b/packages/webapp/pages/settings/appearance.tsx
@@ -7,11 +7,8 @@ import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsCon
 import { useViewSize, ViewSize } from '@dailydotdev/shared/src/hooks';
 import {
   Typography,
-  TypographyColor,
   TypographyType,
 } from '@dailydotdev/shared/src/components/typography/Typography';
-import type { RadioItemProps } from '@dailydotdev/shared/src/components/fields/Radio';
-import { Radio } from '@dailydotdev/shared/src/components/fields/Radio';
 import { ToggleRadio } from '@dailydotdev/shared/src/components/fields/ToggleRadio';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import {
@@ -19,7 +16,6 @@ import {
   TargetId,
   TargetType,
 } from '@dailydotdev/shared/src/lib/log';
-import classNames from 'classnames';
 import { FlexCol } from '@dailydotdev/shared/src/components/utilities';
 import { AccountPageContainer } from '../../components/layouts/SettingsLayout/AccountPageContainer';
 import { getSettingsLayout } from '../../components/layouts/SettingsLayout';
@@ -27,19 +23,11 @@ import { defaultSeo } from '../../next-seo';
 import { getTemplatedTitle } from '../../components/layouts/utils';
 import { SettingsSwitch } from '../../components/layouts/SettingsLayout/common';
 
-const densities: RadioItemProps[] = [
-  { label: 'Eco', value: 'eco' },
-  { label: 'Roomy', value: 'roomy' },
-  { label: 'Cozy', value: 'cozy' },
-];
-
 const AccountManageSubscriptionPage = (): ReactElement => {
   const isLaptop = useViewSize(ViewSize.Laptop);
   const { logEvent } = useLogContext();
 
   const {
-    spaciness,
-    setSpaciness,
     openNewTab,
     toggleOpenNewTab,
     insaneMode,
@@ -91,38 +79,6 @@ const AccountManageSubscriptionPage = (): ReactElement => {
           </FlexCol>
         )}
 
-        <FlexCol className="gap-2">
-          <Typography bold type={TypographyType.Subhead}>
-            Density
-          </Typography>
-
-          {insaneMode && (
-            <Typography
-              type={TypographyType.Subhead}
-              color={TypographyColor.Tertiary}
-            >
-              Not available in list layout
-            </Typography>
-          )}
-
-          <Radio
-            name="density"
-            options={densities}
-            value={spaciness}
-            onChange={setSpaciness}
-            disabled={insaneMode}
-            className={{
-              content: 'w-full justify-between !pr-0',
-              container: '!gap-0',
-              label: classNames(
-                'font-normal typo-callout',
-                insaneMode ? 'text-text-disabled' : 'text-text-secondary',
-              ),
-            }}
-            reverse
-          />
-        </FlexCol>
-
         <FlexCol className="gap-5">
           <Typography bold type={TypographyType.Subhead}>
             Preferences

From 19e5fc634fe6cbaad7edfdaf67a04f97ad79ec61 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 3 Feb 2026 16:25:26 +0200
Subject: [PATCH 6/9] fix: restore max-width constraint for feed cards on wide
 screens

Reverts the removal of max-width calculation that was causing cards
to stretch too wide on large displays.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/Feed.module.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/Feed.module.css b/packages/shared/src/components/Feed.module.css
index 4ebfb00288..89c074beb5 100644
--- a/packages/shared/src/components/Feed.module.css
+++ b/packages/shared/src/components/Feed.module.css
@@ -2,10 +2,14 @@
   grid-template-columns: 100%;
 }
 .container {
-  max-width: 100%;
+  @screen laptopL {
+    max-width: calc(20rem * var(--num-cards) + var(--feed-gap) * (var(--num-cards) - 1));
+  }
 }
 .cards {
-  max-width: 100%;
+  @screen mobileL {
+    max-width: calc(20rem * var(--num-cards) + var(--feed-gap) * (var(--num-cards) - 1));
+  }
 }
 
 .feedRow {

From 5f094244f29074454a84aa1934a4246c32255516 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 3 Feb 2026 16:45:28 +0200
Subject: [PATCH 7/9] fix: only apply feed max-width constraint on 4K+ screens

Cards now use full width on screens below 2560px, and only get
constrained to 20rem per card on ultra-wide/4K displays.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/Feed.module.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/Feed.module.css b/packages/shared/src/components/Feed.module.css
index 89c074beb5..93f95b12aa 100644
--- a/packages/shared/src/components/Feed.module.css
+++ b/packages/shared/src/components/Feed.module.css
@@ -2,12 +2,18 @@
   grid-template-columns: 100%;
 }
 .container {
-  @screen laptopL {
+  max-width: 100%;
+
+  /* Only constrain max-width on 4K+ / ultra-wide screens */
+  @media (min-width: 2560px) {
     max-width: calc(20rem * var(--num-cards) + var(--feed-gap) * (var(--num-cards) - 1));
   }
 }
 .cards {
-  @screen mobileL {
+  max-width: 100%;
+
+  /* Only constrain max-width on 4K+ / ultra-wide screens */
+  @media (min-width: 2560px) {
     max-width: calc(20rem * var(--num-cards) + var(--feed-gap) * (var(--num-cards) - 1));
   }
 }

From a10ec64bf7d325238c4b26c2341e58e6094e13ae Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 3 Feb 2026 17:02:31 +0200
Subject: [PATCH 8/9] fix: use desktopL breakpoint for feed max-width
 constraint

Aligns with design system by using the highest defined breakpoint
(2156px) instead of arbitrary 2560px value.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/Feed.module.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/Feed.module.css b/packages/shared/src/components/Feed.module.css
index 93f95b12aa..186ea669df 100644
--- a/packages/shared/src/components/Feed.module.css
+++ b/packages/shared/src/components/Feed.module.css
@@ -4,16 +4,14 @@
 .container {
   max-width: 100%;
 
-  /* Only constrain max-width on 4K+ / ultra-wide screens */
-  @media (min-width: 2560px) {
+  @screen desktopL {
     max-width: calc(20rem * var(--num-cards) + var(--feed-gap) * (var(--num-cards) - 1));
   }
 }
 .cards {
   max-width: 100%;
 
-  /* Only constrain max-width on 4K+ / ultra-wide screens */
-  @media (min-width: 2560px) {
+  @screen desktopL {
     max-width: calc(20rem * var(--num-cards) + var(--feed-gap) * (var(--num-cards) - 1));
   }
 }

From eb1aeff42a76be6c3ef5529064cf4a4d1fc2391d Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 3 Feb 2026 23:14:56 +0200
Subject: [PATCH 9/9] fix: use sticky header on mobile, fixed on desktop

- Mobile/tablet: sticky header scrolls naturally with content
- Desktop (laptop+): fixed header stays at top
- Removes padding-top on mobile since header is sticky
- Fixes gap issues on Squad and Jobs pages on mobile

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/MainLayout.tsx              | 2 +-
 packages/shared/src/components/feeds/FeedNav.tsx           | 2 +-
 packages/shared/src/components/layout/MainLayoutHeader.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx
index fa11dc460c..20442a4e97 100644
--- a/packages/shared/src/components/MainLayout.tsx
+++ b/packages/shared/src/components/MainLayout.tsx
@@ -196,7 +196,7 @@ function MainLayoutComponent({
       />
       <main
         className={classNames(
-          'flex flex-col pt-14 transition-[padding] duration-300 ease-in-out laptop:pt-16',
+          'flex flex-col transition-[padding] duration-300 ease-in-out laptop:pt-16',
           showSidebar && 'tablet:pl-16 laptop:pl-11',
           className,
           isAuthReady &&
diff --git a/packages/shared/src/components/feeds/FeedNav.tsx b/packages/shared/src/components/feeds/FeedNav.tsx
index e52421fd12..6096a96bb4 100644
--- a/packages/shared/src/components/feeds/FeedNav.tsx
+++ b/packages/shared/src/components/feeds/FeedNav.tsx
@@ -127,7 +127,7 @@ function FeedNav(): ReactElement {
   return (
     <div
       className={classNames(
-        'fixed top-0 z-header w-full bg-background-default tablet:pl-16',
+        'sticky top-0 z-header w-full bg-background-default tablet:pl-16',
         scrollClassName,
       )}
     >
diff --git a/packages/shared/src/components/layout/MainLayoutHeader.tsx b/packages/shared/src/components/layout/MainLayoutHeader.tsx
index e2c0a30466..3f1885feeb 100644
--- a/packages/shared/src/components/layout/MainLayoutHeader.tsx
+++ b/packages/shared/src/components/layout/MainLayoutHeader.tsx
@@ -76,7 +76,7 @@ function MainLayoutHeader({
   if (loadedSettings && !isLaptop) {
     if (isSearchPage) {
       return (
-        <div className="fixed top-0 z-header w-full bg-background-default tablet:pl-16">
+        <div className="sticky top-0 z-header w-full bg-background-default tablet:pl-16">
           <RenderSearchPanel />
           {!isSearch && <MobileExploreHeader path={feedName as string} />}
         </div>