fix(theme): CSS-only PF page inset without PageMainContainer - #4938
karthikjeeyar merged 5 commits into
Conversation
Replace the PageMainContainer layout wrapper with SidebarPage scroll and sticky convex corner masks so BUI siblings share one PatternFly-style well while staying compatible with the default Backstage app layout. Fixes: https://redhat.atlassian.net/browse/RHIDP-14506 Signed-off-by: Yi Cai <yicai@redhat.com> Co-authored-by: Cursor <cursoragent@cursor.com>
|
Important This PR includes changes that affect public-facing API. Please ensure you are adding/updating documentation for new features or behavior. Changed Packages
|
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #4938 +/- ##
=======================================
Coverage 63.57% 63.57%
=======================================
Files 2702 2701 -1
Lines 106498 106504 +6
Branches 30021 30034 +13
=======================================
+ Hits 67710 67714 +4
- Misses 36945 36947 +2
Partials 1843 1843
*This pull request uses carry forward flags. Click here to find out more. Continue to review full report in Codecov by Harness.
🚀 New features to boost your workflow:
|
|
Hi @logonoff @christoph-jerolimov , I raised this PR as a follow-up. This solution should align up well with BUI theme structure. The original ticket got closed but I haven't updated the overlays pr yet. If this looks good we can include this in our 2.1 release. |
logonoff
left a comment
logonoff
left a comment
There was a problem hiding this comment.
the scrollbar isn't being clipped by the page inset, and some elements are appearing outside of the main container:
…lscreen Use margin + clip-path on BackstageSidebarPage so the scrollbar follows the rounded well, and position .fullscreen so its absolute control stays on the graph. Co-authored-by: Cursor <cursoragent@cursor.com>
logonoff
left a comment
logonoff
left a comment
There was a problem hiding this comment.
the scrollbar and scroll container are independently clipped
bg colour in mobile is using the wrong token in certain pages
Keep page-inset layout desktop-only, but paint the content well on all viewports so mobile no longer falls through to body --bui-bg-app. Co-authored-by: Cursor <cursoragent@cursor.com>
Hi @logonoff , how did you test it? I tried to reproduce it with The mobile background color is fixed. Good catch 🤝 |
Firefox 156 on macOS 27, this setting turned on 
|
Thanks for the info. It looks like an edge case to me. On my Firefox it looks good on default settings. I wasn't able to find the "Always show scroll bar" setting on my Firefox either. Do you think we can approve this solution for removing the extra main content container? 
|
Always show scrollbars is a macOS setting. I can see this on Chrome too 
|
|
trackpad scrolling moves the page inset corners along with it Screen.Recording.2026-09-24.at.2.27.29.PM.mov |
…asks Disable rubber-band overscroll on the SidebarPage well, and raise sticky corner mask z-index above Backstage Header so MUI test pages keep top-left rounding. Co-authored-by: Cursor <cursoragent@cursor.com>
|
Thanks for the follow-up and for clarifying the macOS “Always show scrollbars” setting — I can reproduce that in Chrome as well. On that scrollbar strip: this PR keeps a single CSS-only scrollport on On the trackpad / overscroll issue (inset corners moving / a second rounded block appearing above the content): that’s addressed in the latest commits — Could you re-verify on your side with the latest branch tip, @logonoff? Especially:
Happy to discuss whether always-on scrollbars should block dropping |
Match hover affordance for sortable headers and document that arrow keys (not Tab) move between headers inside the React Aria table. Signed-off-by: Yi Cai <yicai@redhat.com> Co-authored-by: Cursor <cursoragent@cursor.com>
|
3 participants
Description
Follow-up to #4891 for RHIDP-14506. Removes
PageMainContainerand the customapp/layoutoverride in favor of a CSS-only PatternFly page inset onBackstageSidebarPage: the shell is the sole scrollport, with sticky convex corner masks so BUI Header + Container siblings (and classic<main>) share one rounded well. This restores compatibility with the default upstream Backstage layout / theme upload path while keeping the PF inset look.Fixed
Checklist
Made with Cursor