Fix Long Applicant Name Issue

[tahazaryab]

CLICKUP TICKET LINK

Summary

• Issue: An applicant with a longer name (that causes it to be broken up into multiple lines) was causing the header div to cover/hide the rest of the components on /recruitment/interview/<any_id> and /recruitment/applicant/<any_id>
• Change: Padding and position styles were updated to ensure that the header component does not cover other existing components when the height increases

Type of change

• Bug fix (non-breaking change which fixes an issue)

Testing Instructions

To manually test the style changes on the frontend:

• Navigate to /recruitment/interview/<any_id> where <any_id> can be random characters, or correspond to a test applicant if created
• Add/update the existing h1 tag by inspecting representing the name of the applicant to a longer name that may take up multiple lines, for example, "ThisIsALongFirstName ThisIsAVeryVeryVeryVeryLongLastName" (can be done using inspect element in your browser)
  • Ensure that the header div does not cover/hide any of the remaining components on the page (meaning that we are able to view both the Full Name of the applicant, as well as the rest of the components in the main content)

Note:

• These changes also apply to /recruitment/application/<any_id>

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation/READ-ME/UMLS (if applicable)
• My changes generate no new warnings

[jennchenn]

Task linked: CU-860pnapxx Fix long name issue for Interview Profile Page