fix: header, sidebar UI and animations #5429

tsahimatsliah · 2026-02-02T10:20:50Z

Summary

Improve feed layout with full-width cards and reduced gaps
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

Test plan

Verify feed cards are full-width with reduced gaps
Verify header stays fixed on scroll (doesn't move up/down)
Verify scrollbar is hidden by default and appears on hover
Verify sidebar collapse/expand animation is smooth without glitches
Verify sidebar padding and alignment is consistent in expanded and collapsed states

Preview domain

https://feed-layout-improvements.preview.app.daily.dev

- 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 <[email protected]>

- 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 <[email protected]>

vercel · 2026-02-02T10:20:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Feb 3, 2026 5:42pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Feb 3, 2026 5:42pm

CLAassistant · 2026-02-02T10:23:06Z

All committers have signed the CLA.

- 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 <[email protected]>

- Cast isVisible.current to boolean for aria-expanded - Remove unsupported variant prop from CreatePostButton Co-authored-by: Cursor <[email protected]>

packages/shared/src/components/feeds/FeedNav.tsx

packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx

rebelchris · 2026-02-03T11:37:47Z

packages/shared/src/components/Feed.module.css

  grid-template-columns: 100%;
 }
 .container {
-  @screen laptopL {


Was this change intentional? It basically makes all sizes the same then? Before this would take user settings for preference into account.

Yes I think it's better and makes the product simpler from a settings perspective.

We can but then we have to maybe remove the settings wdyt?

rebelchris

Generic:

There's a layout jump in sidebar if you collapse/expand it now.

- 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 <[email protected]>

tsahimatsliah · 2026-02-03T13:05:03Z

@rebelchris I fixed everything you mentioned.

Reverts the removal of max-width calculation that was causing cards to stretch too wide on large displays. Co-authored-by: Cursor <[email protected]>

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 <[email protected]>

Aligns with design system by using the highest defined breakpoint (2156px) instead of arbitrary 2560px value. Co-authored-by: Cursor <[email protected]>

rebelchris

Looks good to me now.

@claude do one sanity review to see if anything has breaking changes.

claude · 2026-02-03T17:36:56Z

Claude finished @tsahimatsliah's task in 1m 49s —— View job

Sanity Review for Breaking Changes

I've reviewed all 21 changed files. Here's my assessment:

⚠️ Potential Breaking Changes

1. Removed Density Setting from UI (Feed.module.css:5, appearance.tsx)

Severity: Medium - User-Facing Regression

The PR removes the "Density" setting (Eco/Roomy/Cozy) from the appearance settings page:

Deleted 44 lines from packages/webapp/pages/settings/appearance.tsx
Changed Feed.module.css line 5: now ignores user's spaciness preference
Impact: Users who previously customized feed density will lose their preference in the UI
Mitigation: The spaciness and setSpaciness are still in SettingsContext (packages/shared/src/contexts/SettingsContext.tsx:49), so no API breakage, but user-facing functionality is removed

Recommendation: Consider if this is intentional product simplification or should be reverted. If intentional, consider migrating existing user preferences.

2. Changed Header Positioning (MainLayoutHeader.tsx:96, MainLayout.tsx)

Severity: Low - Visual Behavior Change

Changed from sticky to fixed positioning:

Main layout now has pt-14 laptop:pt-16 (packages/shared/src/components/MainLayout.tsx:199)
Banner offset changed from laptop:pt-8 to laptop:pt-24 (MainLayout.tsx:205)
Impact: Header stays at top during scroll (YouTube-like) instead of moving with content
Risk: Minimal - visual change only, no API breakage

✅ Non-Breaking Changes

3. Sidebar Animation Improvements (FeedContext.tsx, SidebarDesktop.tsx, Section.tsx)

Severity: None - Enhancement

Added 300ms debounced sidebar expansion to prevent layout jumps:

New SIDEBAR_TRANSITION_DURATION = 300 constant (FeedContext.tsx:13)
Debounced sidebar state with useEffect timeout (FeedContext.tsx:130-136)
Synchronized transitions across multiple components
Impact: Smoother animations, no breaking changes

4. Scrollbar Styling (base.css)

Severity: None - Visual Enhancement

Added auto-hide scrollbar behavior:

Scrollbar hidden by default, shows on hover (packages/shared/src/styles/base.css)
Works for both WebKit and Firefox
Impact: Pure CSS changes, no functional breakage

5. FeedNav Simplification (FeedNav.tsx)

Severity: None - Code Cleanup

Removed 37 lines of code (packages/shared/src/components/feeds/FeedNav.tsx):

Simplified component structure
Impact: Internal refactoring, no external API changes

Summary

Breaking Changes: 1 user-facing feature removed (Density setting)

Risk Assessment:

Low if density removal is intentional product decision
Medium if users expect density settings to persist

Recommendation:
✅ Safe to merge IF the density setting removal is a confirmed product decision. Otherwise, consider:

Restoring the density UI, OR
Announcing the deprecation to users, OR
Providing migration path for users with custom density preferences

All other changes are non-breaking enhancements.

| Branch: feed-layout-improvements

tsahimatsliah and others added 2 commits February 2, 2026 08:41

tsahimatsliah requested a review from a team as a code owner February 2, 2026 10:20

tsahimatsliah requested review from AmarTrebinjac, capJavert, omBratteng and rebelchris February 2, 2026 10:20

Merge branch 'main' into feed-layout-improvements

e02cce8

vercel bot had a problem deploying to Preview – daily-webapp February 2, 2026 10:24 Failure

Merge branch 'main' into feed-layout-improvements

3c72c8d

vercel bot had a problem deploying to Preview – daily-webapp February 3, 2026 07:59 Failure

fix: resolve lint and test failures

4b0b365

- 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 <[email protected]>

vercel bot had a problem deploying to Preview – daily-webapp February 3, 2026 08:17 Failure

fix: resolve TypeScript build errors

305951e

- Cast isVisible.current to boolean for aria-expanded - Remove unsupported variant prop from CreatePostButton Co-authored-by: Cursor <[email protected]>

vercel bot deployed to Preview – daily-webapp February 3, 2026 08:29 View deployment

rebelchris reviewed Feb 3, 2026

View reviewed changes

packages/shared/src/components/feeds/FeedNav.tsx Show resolved Hide resolved

rebelchris reviewed Feb 3, 2026

View reviewed changes

packages/shared/src/components/sidebar/sections/CustomFeedSection.tsx Outdated Show resolved Hide resolved

rebelchris reviewed Feb 3, 2026

View reviewed changes

Merge branch 'main' into feed-layout-improvements

12c382d

vercel bot deployed to Preview – storybook February 3, 2026 11:40 View deployment

vercel bot deployed to Preview – daily-webapp February 3, 2026 11:42 View deployment

tsahimatsliah and others added 2 commits February 3, 2026 14:53

Merge branch 'main' into feed-layout-improvements

7c982b8

vercel bot deployed to Preview – daily-webapp February 3, 2026 12:58 View deployment

idoshamun requested a review from rebelchris February 3, 2026 13:42

fix: restore max-width constraint for feed cards on wide screens

19e5fc6

Reverts the removal of max-width calculation that was causing cards to stretch too wide on large displays. Co-authored-by: Cursor <[email protected]>

vercel bot deployed to Preview – daily-webapp February 3, 2026 14:33 View deployment

tsahimatsliah and others added 3 commits February 3, 2026 16:45

fix: only apply feed max-width constraint on 4K+ screens

5f09424

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 <[email protected]>

fix: use desktopL breakpoint for feed max-width constraint

a10ec64

Aligns with design system by using the highest defined breakpoint (2156px) instead of arbitrary 2560px value. Co-authored-by: Cursor <[email protected]>

Merge branch 'main' into feed-layout-improvements

29af47b

vercel bot deployed to Preview – daily-webapp February 3, 2026 16:17 View deployment

Merge branch 'main' into feed-layout-improvements

e6bf228

rebelchris approved these changes Feb 3, 2026

View reviewed changes

vercel bot deployed to Preview – daily-webapp February 3, 2026 17:42 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: header, sidebar UI and animations #5429

fix: header, sidebar UI and animations #5429

Uh oh!

tsahimatsliah commented Feb 2, 2026 •

edited by github-actions bot

Loading

Uh oh!

vercel bot commented Feb 2, 2026 •

edited

Loading

Uh oh!

CLAassistant commented Feb 2, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

rebelchris Feb 3, 2026

Uh oh!

tsahimatsliah Feb 3, 2026

Uh oh!

rebelchris Feb 3, 2026

Uh oh!

rebelchris left a comment

Uh oh!

tsahimatsliah commented Feb 3, 2026

Uh oh!

rebelchris left a comment

Uh oh!

claude bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix: header, sidebar UI and animations #5429

Are you sure you want to change the base?

fix: header, sidebar UI and animations #5429

Uh oh!

Conversation

tsahimatsliah commented Feb 2, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Preview domain

Uh oh!

vercel bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CLAassistant commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rebelchris Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

tsahimatsliah Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

rebelchris Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

rebelchris left a comment

Choose a reason for hiding this comment

Uh oh!

tsahimatsliah commented Feb 3, 2026

Uh oh!

rebelchris left a comment

Choose a reason for hiding this comment

Uh oh!

claude bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Sanity Review for Breaking Changes

⚠️ Potential Breaking Changes

1. Removed Density Setting from UI (Feed.module.css:5, appearance.tsx)

2. Changed Header Positioning (MainLayoutHeader.tsx:96, MainLayout.tsx)

✅ Non-Breaking Changes

3. Sidebar Animation Improvements (FeedContext.tsx, SidebarDesktop.tsx, Section.tsx)

4. Scrollbar Styling (base.css)

5. FeedNav Simplification (FeedNav.tsx)

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tsahimatsliah commented Feb 2, 2026 •

edited by github-actions bot

Loading

vercel bot commented Feb 2, 2026 •

edited

Loading

CLAassistant commented Feb 2, 2026 •

edited

Loading

claude bot commented Feb 3, 2026 •

edited

Loading