fix(table): table thead background issue in safari by jcmill · Pull Request #8472 · patternfly/patternfly

jcmill · 2026-06-23T20:32:20Z

Closes #8453
Move background and border ::before and ::after elements from thead to th for Safari support.

Summary by CodeRabbit

Style
- Dock component: Updated desktop end-border width and color to use the standard border tokens for more consistent rendering.
- Panel component: Adjusted default “before” border width to a high-contrast value and ensured the secondary modifier no longer overrides that border width.
- Table component: Improved sticky header visuals by moving the background and border decoration from the header container pseudo-element to individual header cells.

coderabbitai · 2026-06-23T20:35:25Z

Walkthrough

Three unrelated SCSS component fixes: page.scss updates Dock desktop inline-end border variables to use regular border-width and subtle border-color tokens; panel.scss sets the default panel before-border width to the high-contrast regular value and simplifies the secondary modifier; table.scss moves sticky-header background and border decoration from thead::after to per-cell th::before/th::after pseudo-elements.

Changes

Component Styling Fixes

Layer / File(s)	Summary
Dock desktop border token updates `src/patternfly/components/Page/page.scss`	Root variable block and dock-desktop media query updated to use the regular border-width token and subtle border-color token for the Dock main inline-end border, replacing the prior glass-default/transparent fallback.
Panel before-border width default and secondary modifier `src/patternfly/components/Panel/panel.scss`	Default `--before--BorderWidth` changed from `0` to the high-contrast regular value; `pf-m-secondary` modifier reduced to only set background color, removing its border-width override.
Table sticky-header decoration moved to `th` pseudo-elements `src/patternfly/components/Table/table.scss`	`thead::after` background-color removed; new `th::before` (absolutely positioned, rounded-corner background) and `th::after` (bottom border using sticky border variables) rules added per header cell, replacing the `thead`-level pseudo-element approach to fix Safari rendering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

patternfly/patternfly#8290: Modifies table.scss sticky header rendering with overlapping changes to pseudo-element background/border decoration on sticky headers.
patternfly/patternfly#8303: Modifies panel.scss border handling for the before-layer, introducing before-border width overrides that directly interact with the default value changed here.
patternfly/patternfly#8308: Touches dock styling in page.scss, renaming the dock state class that gates the docked rules updated in this PR.

Suggested labels

released on @prerelease``

Suggested reviewers

andrew-ronaldson
mcoker
lboehling

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	Changes to Page and Panel components appear unrelated to the primary objective of fixing table sticky headers in Safari, potentially representing out-of-scope modifications.	Clarify whether changes to page.scss and panel.scss are necessary dependencies for the table fix, or separate these into a different PR focusing on table header issue.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR successfully addresses the primary objective of issue `#8453` by relocating pseudo-elements from thead to th elements, resolving the Safari sticky header visibility issue.
Title check	✅ Passed	The title follows conventional commit format and accurately reflects the Safari table header fix.

_{✏️ 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.}

coderabbitai

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/patternfly/components/Page/page.scss`:
- Around line 32-33: The CSS custom property
`--#{$page}__dock-main--desktop--BorderInlineEndwidth` has incorrect casing in
the "Endwidth" portion - it should be "EndWidth" to match the standard naming
convention for BorderInlineEndWidth variables across the codebase. Since CSS
custom properties are case-sensitive, this inconsistency prevents external code
from properly overriding the property using the expected casing. Correct the
casing from "BorderInlineEndwidth" to "BorderInlineEndWidth" in both the
variable definition at lines 32-33 and also apply the same fix to the similar
properties mentioned at lines 483-484 to ensure consistency throughout the file.

In `@src/patternfly/components/Table/table.scss`:
- Around line 350-376: The `.#{$table}__th` selector applies sticky header
decoration styles too broadly to all table header cells, including non-header
`<th>` elements that may exist elsewhere in the table structure. Scope this
selector to only target `<th>` cells that are descendants of `.#{$table}__thead`
(such as using `.#{$table}__thead .#{$table}__th` or `.#{$table}__thead >
.#{$table}__th`) to ensure the sticky header pseudo-element styles and
decorations are applied only to actual header cells within the thead element.
- Around line 350-376: The new `.#{$table}__th::before` and
`.#{$table}__th::after` pseudo-element styling is being applied unconditionally,
but it should only be visible when the sticky header is in the `-stuck` state.
The existing opacity toggles that target `thead::before/::after` at lines 304
and 319 need to be extended to also apply to the `.#{$table}__th::before` and
`.#{$table}__th::after` pseudo-elements. Update those opacity toggle rules to
include selectors for the table header cell pseudo-elements so the sticky
styling respects the base/stuck state behavior contract.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: 7e3e74bf-852b-40d0-a3b8-dd5bafd7c516

📥 Commits

Reviewing files that changed from the base of the PR and between 6fe6555 and 17cb1ff.

📒 Files selected for processing (3)

src/patternfly/components/Page/page.scss
src/patternfly/components/Panel/panel.scss
src/patternfly/components/Table/table.scss

patternfly-build · 2026-06-23T20:40:07Z

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

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

mcoker · 2026-06-24T00:29:22Z

@jcmill looks like you may have created this branch from the panel/docked nav branch? Looks like the page/panel stylesheets have a conflict.

mcoker

Looks like there is a bug with nested column headers. I wonder if something like this would work?

tr:first-child  {
  .#{$table}__th:first-child { top/left border }
  .#{$table}__th:last-child { top/right border }
}
tr:last-child  {
  .#{$table}__th:first-child { bottom/left border }
  .#{$table}__th:last-child { bottom/right border }
}

We still have some styles on thead:before/after and some need to be moved to the thead cells. Not an exhaustive list but here are some I found

…d sticky headers

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

…d column headers with sticky header

…cky-stuck

mcoker · 2026-06-25T03:15:49Z

I worked on this a little and added a PR in your repo to show the code diff, although it doesn't have the last commit you just made - jcmill#1

And I created a preview at http://8453-table-thead-hidden-in-safari.surge.sh/

The CSS should fix all of the borders except in Safari with sticky, nested column headers in non-glass theme. That border appears initially, then scrolls off screen. To fix that, I've gone back to how we did that before by adding a tr.pf-m-border-row as the last thing in the thead for that particular table. For some reason, if you use height and background-color to mimic a 1px border, that will stay in the thead and act as a bottom border in Safari. That's how it is in the pf5 sticky nested column header table, too. Having tr.pf-m-border-row there doesn't (or shouldn't anyways) conflict with the borders that work for chrome/FF.

So we would say if you have a table with 1) sticky header, and 2) nested column headers, you need a tr.pf-m-border-row - which is how it was before our v6 release just a few weeks ago. Technically you only need it for Safari, since it works without that element in chrome/firefox.

This doesn't fix the border-radius and shadow issue in Safari, but those can come later.

…h, update border-row to height and bg color

mcoker

NICE WORK!

patternfly-build · 2026-06-25T16:54:51Z

🎉 This PR is included in version 6.6.0-prerelease.16 🎉

The release is available on:

Your semantic-release bot 📦🚀

jcmill requested a review from mcoker June 23, 2026 20:32

coderabbitai Bot reviewed Jun 23, 2026

View reviewed changes

Comment thread src/patternfly/components/Page/page.scss Outdated

Comment thread src/patternfly/components/Table/table.scss Outdated

mcoker reviewed Jun 24, 2026

View reviewed changes

jcmill force-pushed the fix/8453-table-thead-hidden-in-safari branch 2 times, most recently from 17cb1ff to c8526db Compare June 24, 2026 19:28

mcoker reviewed Jun 24, 2026

View reviewed changes

Comment thread src/patternfly/components/Table/table.scss Outdated

Comment thread src/patternfly/components/Table/table.scss Outdated

jcmill and others added 5 commits June 24, 2026 17:34

update transitions for sticky/stuck, set border radius to 0 for neste…

6adab38

…d sticky headers

border for header set to last-child tr pseudo

5ca2a48

Update src/patternfly/components/Table/table.scss

69fe0b2

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

Update src/patternfly/components/Table/table.scss

505fc79

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

change before pseudos to after to avoid losing vertical bars in neste…

35d5cea

…d column headers with sticky header

jcmill force-pushed the fix/8453-table-thead-hidden-in-safari branch from 7f61d5b to 35d5cea Compare June 24, 2026 21:36

jcmill changed the title ~~Fix/8453 table thead hidden in safari~~ fix(table): table thead background issue in safari Jun 24, 2026

set nested column header border block end to 0 in sticky-base and sti…

6cceb3c

…cky-stuck

add border-row to md file for nested headers, move bottom border to t…

fc2442b

…h, update border-row to height and bg color

mcoker approved these changes Jun 25, 2026

View reviewed changes

mcoker merged commit c54a62e into patternfly:main Jun 25, 2026
6 checks passed

patternfly-build added the released on @prerelease label Jun 25, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(table): table thead background issue in safari#8472

fix(table): table thead background issue in safari#8472
mcoker merged 7 commits into
patternfly:mainfrom
jcmill:fix/8453-table-thead-hidden-in-safari

jcmill commented Jun 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

patternfly-build commented Jun 23, 2026 •

edited

Loading

Uh oh!

mcoker commented Jun 24, 2026

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

Uh oh!

mcoker commented Jun 25, 2026

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented Jun 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

jcmill commented Jun 23, 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 Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

mcoker commented Jun 24, 2026

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mcoker commented Jun 25, 2026

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jun 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jcmill commented Jun 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading

patternfly-build commented Jun 23, 2026 •

edited

Loading