fix(theme): CSS-only PF page inset without PageMainContainer

workspaces/theme/.changeset/calm-panel-scroll.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': minor
+---
+
+Replace PageMainContainer with a CSS-only PatternFly page-inset: BackstageSidebarPage is the sole scrollport, clipped with `clip-path` so the scrollbar follows the rounded well (no extra DOM wrapper).

workspaces/theme/packages/app-legacy/src/components/Root/Root.tsx

@@ -46,7 +46,6 @@ import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
 import {
   LogoFull,
   LogoIcon,
-  PageMainContainer,
 } from '@red-hat-developer-hub/backstage-plugin-theme/legacy';
 
 const SidebarLogo = () => {
@@ -122,6 +121,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         <SidebarSettings />
       </SidebarGroup>
     </Sidebar>
-    <PageMainContainer>{children}</PageMainContainer>
+    {children}
   </SidebarPage>
 );

workspaces/theme/packages/app/src/App.tsx

@@ -10,13 +10,12 @@
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+ * See the License for the permissions and limitations under the License.
  */
 
 import { createApp } from '@backstage/frontend-defaults';
-import { appLayoutModule, navModule } from './modules';
+import { navModule } from './modules';
 
 export default createApp({
-  features: [appLayoutModule, navModule],
+  features: [navModule],
 });

workspaces/theme/packages/app/src/modules/index.ts

@@ -13,7 +13,6 @@
  * See the License for the permissions and limitations under the License.
  */
 
-import { appLayoutModule } from './layout';
 import { navModule } from './nav';
 
-export { appLayoutModule, navModule };
+export { navModule };

workspaces/theme/plugins/bcc-test/report-alpha.api.md

@@ -32,7 +32,6 @@ const _default: OverridableFrontendPlugin<
         title?: string | undefined;
       };
       output:
-        | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ExtensionDataRef<string, 'core.routing.path', {}>
         | ExtensionDataRef<
             RouteRef<AnyRouteRefParams>,
@@ -41,6 +40,7 @@ const _default: OverridableFrontendPlugin<
               optional: true;
             }
           >
+        | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ExtensionDataRef<
             string,
             'core.title',

workspaces/theme/plugins/bui-test/report-alpha.api.md

@@ -32,7 +32,6 @@ const _default: OverridableFrontendPlugin<
         title?: string | undefined;
       };
       output:
-        | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ExtensionDataRef<string, 'core.routing.path', {}>
         | ExtensionDataRef<
             RouteRef<AnyRouteRefParams>,
@@ -41,6 +40,7 @@ const _default: OverridableFrontendPlugin<
               optional: true;
             }
           >
+        | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ExtensionDataRef<
             string,
             'core.title',

workspaces/theme/plugins/mui4-test/report-alpha.api.md

@@ -32,7 +32,6 @@ const plugin: OverridableFrontendPlugin<
         title?: string | undefined;
       };
       output:
-        | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ExtensionDataRef<string, 'core.routing.path', {}>
         | ExtensionDataRef<
             RouteRef<AnyRouteRefParams>,
@@ -41,6 +40,7 @@ const plugin: OverridableFrontendPlugin<
               optional: true;
             }
           >
+        | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ExtensionDataRef<
             string,
             'core.title',

workspaces/theme/plugins/mui5-test/report-alpha.api.md

@@ -32,7 +32,6 @@ const _default: OverridableFrontendPlugin<
         title?: string | undefined;
       };
       output:
-        | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ExtensionDataRef<string, 'core.routing.path', {}>
         | ExtensionDataRef<
             RouteRef<AnyRouteRefParams>,
@@ -41,6 +40,7 @@ const _default: OverridableFrontendPlugin<
               optional: true;
             }
           >
+        | ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ExtensionDataRef<
             string,
             'core.title',

workspaces/theme/plugins/theme/report-legacy.api.md

@@ -7,7 +7,6 @@ import { AppTheme } from '@backstage/core-plugin-api';
 import { default as DarkIcon } from '@mui/icons-material/Brightness2Rounded';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { default as LightIcon } from '@mui/icons-material/WbSunnyRounded';
-import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { Theme } from '@mui/material';
 import { UnifiedThemeOptions } from '@backstage/theme';
@@ -91,9 +90,6 @@ export const LogoFull: (props: React.ComponentProps<'svg'>) => JSX_2.Element;
 // @public (undocumented)
 export const LogoIcon: (props: React.ComponentProps<'svg'>) => JSX_2.Element;
 
-// @public (undocumented)
-export const PageMainContainer: (input: PropsWithChildren) => JSX_2.Element;
-
 // @public (undocumented)
 export interface RHDHThemePalette {
   // (undocumented)

workspaces/theme/plugins/theme/report.api.md

@@ -5,17 +5,13 @@
 ```ts
 import { FrontendModule } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { PropsWithChildren } from 'react';
 
 // @public (undocumented)
 export const LogoFull: (props: React.ComponentProps<'svg'>) => JSX_2.Element;
 
 // @public (undocumented)
 export const LogoIcon: (props: React.ComponentProps<'svg'>) => JSX_2.Element;
 
-// @public (undocumented)
-export const PageMainContainer: (input: PropsWithChildren) => JSX_2.Element;
-
 // @public
 const rhdhThemeModule: FrontendModule;
 export default rhdhThemeModule;

workspaces/theme/plugins/theme/src/assets/bui/component-overrides.css

@@ -619,6 +619,26 @@ body[data-theme-name='dark-customized'][data-theme-mode='dark'] {
       #f2f2f2
     );
   }
+  /*
+   * Hover/focus parity: BUI only reveals the sort chevron on .bui-TableHead:hover
+   * (or when already sorted). Show it on keyboard focus too so mouse and keyboard
+   * users get the same sortable affordance.
+   *
+   * Keyboard note (React Aria / BUI table): Tab enters or leaves the table as a
+   * single stop. To move between sortable headers while one is focused, use the
+   * arrow keys — not Tab.
+   */
+  .bui-TableHead:focus-visible .bui-TableHeadSortButton,
+  .bui-TableHead[data-focused] .bui-TableHeadSortButton,
+  .bui-TableHead[data-focus-visible] .bui-TableHeadSortButton {
+    opacity: 1;
+  }
+  .bui-TableHead:focus-visible,
+  .bui-TableHead[data-focused],
+  .bui-TableHead[data-focus-visible] {
+    outline: 2px solid var(--bui-ring, var(--bui-bg-solid));
+    outline-offset: -2px;
+  }
   .bui-TableHead[data-sort-direction='ascending'] .bui-TableHeadSortButton,
   .bui-TableHead[data-sort-direction='descending'] .bui-TableHeadSortButton {
     color: var(--pf-t--global--color--brand--clicked, #004d99);
@@ -832,10 +852,10 @@ body[data-theme-name='dark-customized'][data-theme-mode='dark'] {
 
   /*
    * Page inset / rounded content well:
-   * Prefer a PatternFly-style main container (`RHDHPageMainContainer` /
-   * `#rhdh-page-main-container`) beside the sidebar — see createComponents.ts.
-   * Do not clip/round BackstageSidebarPage-root itself; that fights scrolling
-   * when Header + Containers are loose siblings of nav (BUI pages).
+   * BackstageSidebarPage is the sole scrollport. createComponents.ts applies
+   * margin inset + clip-path, sticky left-edge corner masks, and
+   * overscroll-behavior: none — for both classic <main> and fragmented BUI
+   * Header + Container siblings; no extra DOM wrapper.
    */
 }
 

workspaces/theme/plugins/theme/src/components/index.ts

@@ -16,5 +16,4 @@
 
 export * from './LogoFull';
 export * from './LogoIcon';
-export * from './PageMainContainer';
 export * from './ThemeProvider';

workspaces/theme/plugins/theme/src/index.ts

@@ -28,7 +28,7 @@ import './assets/fonts/font.min.css';
 import './assets/bui/tokens.css';
 import './assets/bui/component-overrides.css';
 
-export { LogoFull, LogoIcon, PageMainContainer } from './components';
+export { LogoFull, LogoIcon } from './components';
 
 /**
  * RHDH themes as NFS extensions (ThemeBlueprint).

workspaces/theme/plugins/theme/src/legacyExports.ts

@@ -21,7 +21,7 @@ import './assets/fonts/font.min.css';
 
 export * from './hooks';
 export * from './themes';
-export { LogoFull, LogoIcon, PageMainContainer } from './components';
+export { LogoFull, LogoIcon } from './components';
 export type {
   BackstageThemePalette,
   RHDHThemePalette,