Fixing HeaderPanel Alignment and Screen Coverage Issue

[Ankit-Matth]

Pull Requests Requirements

• The PR title includes a brief description of the work done, including the Issue number if applicable.
• The PR includes a video showing the changes for the work done.
• The PR title follows conventional commit label standards.
• The changes confirm to the OpenElis Global x3 Styleguide and design documentation.
• The changes include tests or are validated by existing tests.
• I have read and agree to the Contributing Guidelines of this project.

Summary

This PR makes sure that the "Open ELIS" and "Logout" texts in the HeaderPanel line up correctly with the icons on the left. It also improves interface usability by adjusting the HeaderPanel width to prevent it from covering most of the screen on smaller devices.

Related Issue

This PR fixes the issue #871

Screen Recordings

Before:

Before.mp4

After:

After.mp4

[Ankit-Matth]

Hey @mozzy11, please review & merge this pull request.