Shrink footer section desktop & mobile

[HenrikeW]

Related issue(s) and PR(s)

This PR closes #588

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Other

List of changes made

• the heading was removed
• instead, the add-button has an explanatory text
• the unsaved changes warning only takes space when it's actually displayed
• the labels are slightly smaller
• the issue label is shortened and combined with a placeholder that provides an example
• some padding was removed
• bootstrap classes were removed and replaced by flexboxes that better fit our needs
• on mobile view / extreme zoom, the elements in the footer wrap below each other

Screenshot of the fix

Testing

• try and play with the page:
  • in several screen sizes and zoom-levels
  • in different browsers
  • search for different things in different sizes
  • have some unsaved changes and combine with different screen sizes, browsers and search terms

Further comments

Definition of Done checklist

• I have made an effort making the commit history understandable
• I have performed a self-review of my own code and commented any hard-to-understand areas
• Tests and lint/format validations are passing
• My changes generate no new warnings

[KattisLej]

Reviewing

[KattisLej]

Looks very good, I have two comments about the label and the all changes saved....
Checked in different devices view and think it's working very well.

[jonandernovella]

Looks good to me. The mobile UX when adding new rows is greatly improved with these changes.

[KattisLej]

Very good job!