fix(notification-drawer): prevent list item layout shift when marking as read by tarunvashishth · Pull Request #8134 · patternfly/patternfly

tarunvashishth · 2026-02-13T20:25:40Z

Prevents Notification Drawer layout shift when unread items are marked read by moving the list-item border from the element itself to a ::before pseudo-element. Visual styles remain the same; box size no longer changes.

Assisted-by: GitHub Copilot

Summary by CodeRabbit

Style
- Notification drawer list-item borders now render via a layered overlay for more consistent visuals and preserved corner radii.
- Removed direct borders from list items and adjusted read-state positioning to align with the overlay approach.
- Added an adjustable focus outline offset to improve keyboard focus visuals.
- Preserved existing state-specific border colors (info, warning, danger, success, custom, read).

… as read

coderabbitai · 2026-02-13T20:25:59Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 88b5b36 and 1d67438.

📒 Files selected for processing (1)

src/patternfly/components/NotificationDrawer/notification-drawer.scss

Walkthrough

Moved list-item border rendering to a ::before overlay that inherits border-radius and uses a new outline-offset variable (--notification-drawer__list-item--OutlineOffset); removed position: relative from the pf-m-read modifier to avoid layout shift.

Changes

Cohort / File(s)	Summary
Notification Drawer CSS `src/patternfly/components/NotificationDrawer/notification-drawer.scss`	Added `--notification-drawer__list-item--OutlineOffset` and applied `outline-offset`; replaced `.notification-drawer__list-item` border with a `::before` overlay (absolute, inset:0, non-interactive) that renders border and preserves border-radius; removed `position: relative` from `.pf-m-read`; retained state-specific border-color logic delegated to the overlay.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

mcoker
kmcfaul

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title follows conventional commit format with 'fix' prefix and clearly describes the main change: preventing layout shift in notification drawer.
Linked Issues check	✅ Passed	The code changes fully address issue `#8091` by moving the border from the list-item element to a ::before pseudo-element, preventing layout shifts when items toggle read state.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the layout shift issue; the modifications to border handling, outline-offset variable, and ::before overlay are in scope.

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

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 · 2026-02-13T20:28:55Z

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

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

mcoker

LGTM except for one thing. The focus outline on notification drawer items is now covered by the border. Can you address that? One fix could be to use an outline offset of -4px.

mcoker

Just one update please, otherwise LGTM!

mcoker · 2026-02-23T19:05:07Z

    }
+
+    &:focus-visible {
+      outline-offset: var(--#{$notification-drawer}__list-item--focus--OutlineOffset);


Can you apply this style to the .#{$notification-drawer}__list-item element directly - not just on .pf-m-hoverable&:focus-visible? Since items have a border, seems fair that when any receive focus, the outline should be offset. FWIW we also do not currently use outline for any purposes other than focus outlines.

I’ve applied the style to .#{$notification-drawer}__list-item.

mcoker · 2026-02-24T15:31:09Z

+  &:focus-visible {
+    outline-offset: var(--#{$notification-drawer}__list-item--focus--OutlineOffset);
+  }


Sorry, what I meant was to move outline-offset to the main block of declarations for .#{$notification-drawer}__list-item - no need to just scope it to &:focus-visible

https://github.com/tarunvashishth/patternfly/blob/3ecfd7440d7e31b040fa2e36d7f3f08518cd3351/src/patternfly/components/NotificationDrawer/notification-drawer.scss#L166-L175

…larations for .#{-drawer}__list-item

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/NotificationDrawer/notification-drawer.scss`:
- Line 40: Rename the CSS custom property to match the existing OutlineOffset
convention: change --#{$notification-drawer}__list-item--focus--OutlineOffset to
--#{$notification-drawer}__list-item--OutlineOffset and update any usages to
that name so it aligns with the group-toggle variable (--OutlineOffset) and
removes the redundant --focus-- infix for consistency.

ℹ️ Review info

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3ecfd74 and 88b5b36.

📒 Files selected for processing (1)

src/patternfly/components/NotificationDrawer/notification-drawer.scss

mcoker

Coderabbit has a good point - no need for --focus in the var name now that the style no longer applies specifically for the focus state.

…er.scss Co-authored-by: Michael Coker <[email protected]>

patternfly-build · 2026-03-02T20:49:44Z

🎉 This PR is included in version 6.5.0-prerelease.46 🎉

The release is available on:

Your semantic-release bot 📦🚀

fix(notification-drawer): prevent list item layout shift when marking…

a2baf50

… as read

mcoker requested changes Feb 17, 2026

View reviewed changes

fix(notification-drawer): keep focus outline visible with pseudo-border

b284c3a

coderabbitai Bot requested review from kmcfaul and mcoker February 17, 2026 19:13

mcoker requested changes Feb 23, 2026

View reviewed changes

fix(notification-drawer): apply focus outline offset to all list items

3ecfd74

coderabbitai Bot requested a review from mcoker February 24, 2026 07:35

mcoker requested changes Feb 24, 2026

View reviewed changes

fix(notification-drawer):move outline-offset to the main block of dec…

88b5b36

…larations for .#{-drawer}__list-item

coderabbitai Bot requested a review from mcoker February 25, 2026 11:31

coderabbitai Bot reviewed Feb 25, 2026

View reviewed changes

Comment thread src/patternfly/components/NotificationDrawer/notification-drawer.scss Outdated

mcoker requested changes Feb 25, 2026

View reviewed changes

Comment thread src/patternfly/components/NotificationDrawer/notification-drawer.scss Outdated

Comment thread src/patternfly/components/NotificationDrawer/notification-drawer.scss Outdated

tarunvashishth and others added 2 commits February 27, 2026 12:09

Update src/patternfly/components/NotificationDrawer/notification-draw…

cb7e107

…er.scss Co-authored-by: Michael Coker <[email protected]>

Update src/patternfly/components/NotificationDrawer/notification-draw…

1d67438

…er.scss Co-authored-by: Michael Coker <[email protected]>

coderabbitai Bot requested a review from mcoker February 27, 2026 06:40

mcoker approved these changes Mar 2, 2026

View reviewed changes

mcoker merged commit 66c6d91 into patternfly:main Mar 2, 2026
5 checks passed

patternfly-build added the released on @prerelease label Mar 2, 2026

This was referenced Mar 20, 2026

Drawer - Glass PR Design Follow-ups & Fixes #8234

Closed

Change .pf-m-no-plain modifiers to .pf-m-no-plain-on-glass #8239

Closed

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Navigation Menu

fix(notification-drawer): prevent list item layout shift when marking as read - #8134

fix(notification-drawer): prevent list item layout shift when marking as read#8134
mcoker merged 6 commits into
patternfly:mainfrom
tarunvashishth:fix/notification-drawer-no-layout-shift

tarunvashishth commented Feb 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Feb 13, 2026 •

edited

Loading

Reviews paused

Uh oh!

patternfly-build commented Feb 13, 2026 •

edited

Loading

Uh oh!

mcoker left a comment

Uh oh!

mcoker left a comment

Uh oh!

mcoker Feb 23, 2026

Uh oh!

tarunvashishth Feb 24, 2026

Uh oh!

mcoker Feb 24, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

patternfly-build commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

tarunvashishth commented Feb 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Uh oh!

patternfly-build commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

tarunvashishth Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

patternfly-build commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tarunvashishth commented Feb 13, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 13, 2026 •

edited

Loading

patternfly-build commented Feb 13, 2026 •

edited

Loading