General: Improve form responsiveness

[Bofan-Zhu]

Checklist

General

• I tested all changes and their related features with all corresponding user types.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Motivation and Context

The current forms are not usable on smaller screens (Progress stepper is cut off/needs scrolling, inputs are too small and not aligned correctly)

Description

This PR:

• adds responsiveness to the forms structure: form inputs are each stacked vertically
• changes the progress stepper to individual bars for each step
• moves the saving state to the top for smaller screen sizes

Steps for Testing

Prerequisites:

1. Log in to TumApply as Professor/Applicant
2. Navigate to Create Position/Apply to a Position
3. Check that each input is on a separate line
4. Check that progress stepper and sticky footer is visible for small screen sizes

Review Progress

Code Review

• Code Review 1

Manual Tests

• Test 1

Screenshots

[github-actions]

@Bofan-Zhu Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

@Bofan-Zhu Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[sachmii]

I know this is not related to this PR but maybe you could fix it here or open an issue for it:

The text and the toggle bar are not really well aligned (Professor - Create Position)

[sachmii]

Tried locally, looks great.

Maybe you could think of showing the name of the step when hovering over it (not really relevant for mobile devices but smaller screens in general)

[Bofan-Zhu]

I know this is not related to this PR but maybe you could fix it here or open an issue for it:

The text and the toggle bar are not really well aligned (Professor - Create Position)

Sure, fixed it