Skip to content

fix(page): sync sidebar close animation with page content shift on viewport resize#8135

Open
tarunvashishth wants to merge 1 commit into
patternfly:mainfrom
tarunvashishth:fix/sidebar-close-animation-sync
Open

fix(page): sync sidebar close animation with page content shift on viewport resize#8135
tarunvashishth wants to merge 1 commit into
patternfly:mainfrom
tarunvashishth:fix/sidebar-close-animation-sync

Conversation

@tarunvashishth

@tarunvashishth tarunvashishth commented Feb 15, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Fixes #7954

This PR fixes the responsive resize bug where, around the xl breakpoint (1200px), page content shifted before the sidebar finished closing/expanding.
Root cause was a temporary mismatch between layout/media-query changes and managed sidebar state updates during resize.

Changes in page.scss:

Sync page__main-container transition timing with sidebar motion timing.
Prevent transient stale “expanded” sidebar behavior below xl during managed-sidebar resize updates.
Remove the visual lag/jump so sidebar and main content stay in sync while resizing.

Assisted By : Github copilot

Summary by CodeRabbit

Style

  • Enhanced page component animations with new transition properties for smoother sidebar interactions.
  • Improved responsive layout: sidebar automatically collapses on smaller screens below the xl breakpoint, optimizing space usage.
  • Better accessibility support: all animations now respect reduced-motion user preferences for a more comfortable experience.
  • Main container transitions are now properly synchronized with sidebar animations.

@coderabbitai

coderabbitai Bot commented Feb 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Walkthrough

This change modifies the Page component's SCSS to synchronize sidebar animation timing with page content transitions during viewport resize by introducing main container CSS custom properties that mirror sidebar transition durations.

Changes

Cohort / File(s) Summary
CSS Custom Properties for Page Layout Animation
src/patternfly/components/Page/page.scss		 Adds three new CSS custom properties (--#{$page}__main-container--TransitionProperty, --#{$page}__main-container--TransitionDuration, --#{$page}__main-container--TransitionTimingFunction) to synchronize main container transitions with sidebar transitions. Includes responsive media query to collapse expanded sidebar at xl and below breakpoints. Applies transition declarations to main container to resolve animation timing misalignment during viewport resize.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Merge Conflict Detection ⚠️ Warning ❌ Merge conflicts detected (32 files):

⚔️ .github/ISSUE_TEMPLATE/design_handoff.yml (content)
⚔️ backstop_data/bitmaps_reference/pf-core__components_notification-drawer_html_basic_0_document_0_mobile.png (content)
⚔️ backstop_data/bitmaps_reference/pf-core__components_notification-drawer_html_basic_0_document_1_tablet.png (content)
⚔️ backstop_data/bitmaps_reference/pf-core__components_notification-drawer_html_basic_0_document_2_desktop.png (content)
⚔️ backstop_data/bitmaps_reference/pf-core__components_notification-drawer_html_groups_0_document_0_mobile.png (content)
⚔️ backstop_data/bitmaps_reference/pf-core__components_notification-drawer_html_groups_0_document_1_tablet.png (content)
⚔️ backstop_data/bitmaps_reference/pf-core__components_notification-drawer_html_groups_0_document_2_desktop.png (content)
⚔️ package.json (content)
⚔️ src/patternfly/base/patternfly-common.scss (content)
⚔️ src/patternfly/base/patternfly-svg-icons.scss (content)
⚔️ src/patternfly/base/tokens/tokens-dark.scss (content)
⚔️ src/patternfly/base/tokens/tokens-default.scss (content)
⚔️ src/patternfly/base/tokens/tokens-glass-dark.scss (content)
⚔️ src/patternfly/base/tokens/tokens-glass.scss (content)
⚔️ src/patternfly/base/tokens/tokens-local.scss (content)
⚔️ src/patternfly/base/tokens/tokens-palette.scss (content)
⚔️ src/patternfly/base/tokens/tokens-redhat-dark.scss (content)
⚔️ src/patternfly/base/tokens/tokens-redhat-glass-dark.scss (content)
⚔️ src/patternfly/base/tokens/tokens-redhat-glass.scss (content)
⚔️ src/patternfly/base/tokens/tokens-redhat-highcontrast-dark.scss (content)
⚔️ src/patternfly/base/tokens/tokens-redhat-highcontrast.scss (content)
⚔️ src/patternfly/base/tokens/tokens-redhat.scss (content)
⚔️ src/patternfly/components/Compass/compass.scss (content)
⚔️ src/patternfly/components/Drawer/drawer.scss (content)
⚔️ src/patternfly/components/Hero/hero.scss (content)
⚔️ src/patternfly/components/Masthead/masthead.scss (content)
⚔️ src/patternfly/components/NotificationDrawer/notification-drawer.scss (content)
⚔️ src/patternfly/components/Page/page.scss (content)
⚔️ src/patternfly/components/Table/examples/Table.md (content)
⚔️ src/patternfly/components/Table/table-grid.scss (content)
⚔️ src/patternfly/demos/Table/examples/Table.md (content)
⚔️ yarn.lock (content)

These conflicts must be resolved before merging into main.		 Resolve conflicts locally and push changes to this branch.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title follows conventional commit guidelines with 'fix' type and clear description of the specific fix related to sidebar animation synchronization.
Linked Issues check ✅ Passed The PR successfully addresses all coding requirements from issue #7954 by synchronizing transition timing between page content and sidebar animations through CSS custom properties and media query adjustments.
Out of Scope Changes check ✅ Passed All changes in the PR are directly scoped to fixing the sidebar animation synchronization issue; no unrelated modifications or scope creep detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

No actionable comments were generated in the recent review. 🎉

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build

patternfly-build commented Feb 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Preview: https://pf-pr-8135.surge.sh

A11y report: https://pf-pr-8135-a11y.surge.sh

@github-actions

github-actions Bot commented Apr 24, 2026

Copy link
Copy Markdown

This PR has been automatically marked as stale because it has not had activity in the last 60 days.

@github-actions github-actions Bot added the Stale label Apr 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Stale

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug - Sidebar close animation out of sync with page content shift on viewport resize

2 participants

@tarunvashishth @patternfly-build