Skip to content

Bug - feedbackModal - fourth card partially hidden behind footer panel #98

Closed

Description

@hemahg

Describe the behavior
When opening the PatternFly FeedbackModal, only the first three cards are fully visible. The fourth card requires scrolling to become visible, as it appears below the fold and partially behind the footer panel.

We have implemented the FeedbackModal exactly as shown in the PatternFly example.

To Reproduce
Steps to reproduce the behavior:

  1. Open the application

https://console-dev.streamshub-dev-92daa805090a0f8b4f72dc8a33fe4aaf-0000.us-east.containers.appdomain.cloud/

  1. Click on the Help (question mark) icon in the masthead
  2. Observe the FeedbackModal
  3. Notice that only three cards are visible initially
  4. Scroll down to see the fourth card

Expected behavior
It is unclear whether all four cards are expected to be visible without scrolling. On the PatternFly website example, all four cards appear visible depending on viewport size. However, in the official CodeSandbox, the same scrolling behavior occurs.

Screenshots

image

Desktop (please complete the following information):

  • OS: macOS / Windows
  • Browser: Chrome
  • Version: (your browser version)

Additional context
The behavior in our application matches the behavior seen in the official PatternFly CodeSandbox example. This suggests that the scrolling may be the default modal sizing behavior rather than an implementation issue on our side.

We would like clarification on whether this is the intended behavior or if adjustments are recommended to ensure all four cards are visible without scrolling.


Jira Issue: PF-3688

Activity

  1. added theissue type on Mar 3, 2026
  2. moved this from Needs triage to Ready to assign in PatternFly Issueson Mar 3, 2026
  3. fallmo commented on Mar 10, 2026

    @fallmo

    Hey, turns out you have to import the css

    import "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css";
    

    Hey @nicolethoen do the examples need to be updated to reflect this? (the examples could also use some formatting btw).

  4. hemahg commented on Mar 11, 2026

    @hemahg
    Author

    @fallmo Thanks! Importing the CSS worked and fixed the issue.

  5. added theissue type on Mar 11, 2026
  6. nicolethoen commented on Mar 25, 2026

    @nicolethoen
    Collaborator

    resolved ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions