Contribution UI - Improve/Add Responsive Design

[beaumorley]

Description

There are issues with the Responsive design implementation for the overall Contribution UI. This issue is around applying PatternFly responsive design practices.

@Misjohns can you add or link the issues you have found?
@jeff-phillips-18 FYI. Not sure how much design guidance this one will require for you.

[vishnoianil]

@Misjohns @jeff-phillips-18 If you have any related reference, please update the issue.

I will move it to "Ready" once it has all the relevant information.

[Misjohns]

Sticky footer

Across all steps:
The buttons should appear in a sticky footer so the user doesn't need to scroll down to see/use them.

Knowledge contribution: Seed examples step

Weird behavior: The footer becomes sticky when the user scrolls down to it and then up.

Playgroud >Chat with model:
The message bar should be sticky. All content within the message (response) area should scroll behind it not push it down.

PF sample

Dashboard at 320x568

The masthead distorts, cutting off some of the icons. The masthead should reflow to show the nav menu button, help, theme toggle, and overflow menu beneath the application logo/name like the PF sample below.

The action menu for the submission card gets cut off. It should open to the left.

PF sample

Knowledge contribution at 320x568

Across all steps: The wizard step menu does not react as expected. I would expect to click a step and the menu auto-close and navigate me to the selected step. Currently, the user has to close the menu after selecting the step.

Document information step:
The text on buttons does not respond, making it difficult to read.

Seed examples step:
When user click "Select context from file" button under each seed sample section, a modal appears.

The "show content from context selection" button gets cut off.

[Misjohns]

I opened a bug for the wizard step selector: patternfly/patternfly-react#11516