fix: homepage customizabl layout

[rohitratannagar]

Hey, I just made a Pull Request!

Description

• fixes: https://redhat.atlassian.net/browse/RHDHBUGS-2907

Fixes the customizable home page grid not updating its layout when the main content column changes width without a browser viewport resize (for example when the RHDH docked drawer opens or closes).

UI before changes

UI after changes

Screen.Recording.2026-04-07.at.2.16.52.PM.mov

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-gh-app]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@red-hat-developer-hub/backstage-plugin-dynamic-home-page	workspaces/homepage/plugins/dynamic-home-page	patch	v1.11.0

[rhdh-qodo-merge]

Review Summary by Qodo

Fix customizable homepage layout responsiveness

🐞 Bug fix ✨ Enhancement

Walkthroughs

Description

• Adds container-based responsive layout detection via useContainerQuery hook
• Enables window resize event dispatch when container width changes
• Wraps grid layouts with container ref to track width changes
• Fixes responsiveness issues in customizable homepage grid

Diagram

flowchart LR
  A["useContainerQuery Hook"] -->|"notifyWindowResize option"| B["Dispatch window resize event"]
  B -->|"Triggers remeasure"| C["react-grid-layout WidthProvider"]
  D["CustomizableGrid Component"] -->|"Uses hook with ref"| A
  E["CustomizableGridLayout Component"] -->|"Uses hook with ref"| A
  D -->|"Wraps grid in container"| F["Container div with ref"]
  E -->|"Wraps grid in container"| F

Loading

File Changes

1. workspaces/homepage/plugins/dynamic-home-page/src/hooks/useContainerQuery.ts ✨ Enhancement +25/-4

Add window resize notification to container query hook

• Added UseContainerQueryOptions type with optional notifyWindowResize flag
• Implemented window resize event dispatch when container width changes
• Refactored width update logic into onObservedWidth helper function
• Updated hook dependency array to include notifyWindowResize option

workspaces/homepage/plugins/dynamic-home-page/src/hooks/useContainerQuery.ts

---

2. workspaces/homepage/plugins/dynamic-home-page/src/alpha/components/CustomizableGridLayout.tsx 🐞 Bug fix +18/-10

Integrate container query hook into grid layout

• Added useRef import and created gridContainerRef for grid container
• Integrated useContainerQuery hook with notifyWindowResize enabled
• Wrapped CustomHomepageGrid in container div with ref and width constraints
• Applied width: 100%, minWidth: 0, and boxSizing: border-box styles

workspaces/homepage/plugins/dynamic-home-page/src/alpha/components/CustomizableGridLayout.tsx

---

3. workspaces/homepage/plugins/dynamic-home-page/src/components/CustomizableGrid.tsx 🐞 Bug fix +16/-8

Integrate container query hook into grid layout

• Added useRef import and created gridContainerRef for grid container
• Integrated useContainerQuery hook with notifyWindowResize enabled
• Wrapped CustomHomepageGrid in container div with ref and width constraints
• Applied width: 100%, minWidth: 0, and boxSizing: border-box styles

workspaces/homepage/plugins/dynamic-home-page/src/components/CustomizableGrid.tsx

---

View more (1)

4. workspaces/homepage/.changeset/famous-bats-whisper.md 📝 Documentation +5/-0

Add changeset for responsiveness fix

• Created changeset entry for patch version bump
• Documents fix for responsiveness issue in customizable home-page

workspaces/homepage/.changeset/famous-bats-whisper.md

---

[rhdh-qodo-merge]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX Issues (0)

1. Resize event spam 🐞 Bug ➹ Performance

Description

When notifyWindowResize is enabled, useContainerQuery dispatches a synthetic window resize
event on every ResizeObserver notification (and on the initial measurement) with no
throttling/coalescing. This can generate a high-frequency global resize storm during container
resizes/animations, increasing layout/reflow work and risking feedback loops if any resize handlers
trigger additional layout changes.

Code

workspaces/homepage/plugins/dynamic-home-page/src/hooks/useContainerQuery.ts[R76-97]

+    const maybeNotifyWindowResize = () => {
+      if (notifyWindowResize) {
+        window.dispatchEvent(new Event('resize'));
+      }
+    };
+
    const updateSize = (width: number) => {
      const next = resolveContainerSize(width);
      setContainerSize(prev => (prev === next ? prev : next));
    };

-    // Initial read
-    updateSize(el.getBoundingClientRect().width);
+    const onObservedWidth = (width: number) => {
+      updateSize(width);
+      maybeNotifyWindowResize();
+    };
+
+    onObservedWidth(el.getBoundingClientRect().width);

    const observer = new ResizeObserver(entries => {
      if (!entries.length) return;
-      updateSize(entries[0].contentRect.width);
+      onObservedWidth(entries[0].contentRect.width);
    });

Evidence

maybeNotifyWindowResize unconditionally dispatches window.dispatchEvent(new Event('resize'))
whenever notifyWindowResize is true, and it is called for both the initial width read and every
ResizeObserver callback via onObservedWidth. The new call sites enable this behavior for the
homepage grids by passing { notifyWindowResize: true }.

workspaces/homepage/plugins/dynamic-home-page/src/hooks/useContainerQuery.ts[69-101]
workspaces/homepage/plugins/dynamic-home-page/src/components/CustomizableGrid.tsx[61-66]
workspaces/homepage/plugins/dynamic-home-page/src/alpha/components/CustomizableGridLayout.tsx[50-56]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`useContainerQuery` dispatches a synthetic `window` `resize` event on every `ResizeObserver` callback when `notifyWindowResize` is enabled. This can create a large number of global resize events during container resizing/animation.

## Issue Context
The resize dispatch is invoked both for the initial measurement and for every observer notification.

## Fix Focus Areas
- workspaces/homepage/plugins/dynamic-home-page/src/hooks/useContainerQuery.ts[65-101]

## Suggested fix
- Coalesce resize dispatches to at most once per animation frame (e.g., via `requestAnimationFrame`) and/or debounce with a small timeout.
- Track the last observed width in a `useRef` and only dispatch when the width actually changes (and optionally when it changes by a meaningful threshold).
- (Optional hardening) Guard dispatch with `typeof window !== 'undefined'` to keep the hook safe in non-browser test/SSR-like environments.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud