Set headers and footers of dialogs to be fixed so close and save buttons are always visible

[SimoneZaza]

Description

As a user I want to see what dialog I'm in, also when I've scrolled down a bit, left my computer for a while, and then come back. Also, I want to be able to close it at any time and last but not least, I want to see the save/other action button at any time, so that I'm aware of the need of pressing this button before I close the dialog.

Acceptance criteria

• [ ] Headers to be fixed when scrolling (title, close button)
• [ ] Footers with action buttons to be fixed to the bottom of the dialog, the content to scroll between header and footer
• [ ] We need to use a new component (dialogWithGrid) that allows to specify the width in columns (10col for callout create/edit)
• [ ] All dialog content should be put in a component named DialogContent

Additional Context

Overview of dialogs in the Spaces, Challenges and Opportunities with adjustments in brackets Perhaps a discussion needed if a footer needs to be implemented in every dialog to improve the viewing experience.

Space: Dashboard

• About this Space (Header needs to be adjusted to H3)
• Events
• Recommended by host

Space: Community

• Who's involved
• Contact the host(s) (Header needs to be adjusted to H3)
• Posts, whiteboards, collection of links etc.

Space: Challenges

• More Challenges

Space: Knowledge Base

• Posts, whiteboards, collection of links etc.

Challenge: Dashboard

• Recommended by host
• Share Challenge (Header needs to be adjusted to H3)
• Contact the lead(s) (Header needs to be adjusted to H3)

Challenge: Contribute

• Add/create callout
• Posts, whiteboards, collection of links etc.

Challenge: About

• Innovation flow (Header needs to be adjusted to H3)
• Context (Header needs to be adjusted to H3)

Opportunity: Dashboard

• Recommended by host
• Share Opportunity (Header needs to be adjusted to H3)
• Contact the Lead(s) (Header needs to be adjusted to H3)

Opportunity: Contribute

• Add/Create Callout
• Posts, whiteboards, collection of links etc.

Opportunity: About

• Context (Header needs to be adjusted to H3)

[larssondenise]

Giving priority as users lose work because they missed the publish/create button. Also because they are not prompted with 'are you sure you want to close, because you have content in there'. This is raised as a separate issue

[Comoque1]

• [ ] Add link to collection of links dialog, doesn't have "Add another link" button and footer links fixed

2. On open event dialog footer is not fixed: https://acc-alkem.io/space-01-02-24-release/challenges/space-01-02-24-relea-9651/dashboard/calendar/12221-6009

[Comoque1]

@me-andre I've added my findings in the above comment. @SimoneZaza , could you please review and share your thoughts if we address as part of this one or, raise separate issues?

[Comoque1]

Publish Callout and Unpublish Callout dialogs have the header H2 and footer is not fixed

[Comoque1]

Create new Callout template header is not H3

[Comoque1]

Expanded view of callouts when have longer description and user scrolls to bottom, header is invisible

Also probably would make sense to have the "+" buttons fixed on the bottom.???

[Comoque1]

Expanded opportunity context vies have the header in H2