approval-request-teaser component

[spelkey-ucd]

as seen on the home page: https://www.figma.com/design/wTIUzEyuiRus0FpnD27QZx/Travel?node-id=7-2&t=uvP8Vl3cOxMIWf3u-0

Use the design that has the little icons and the submitter name in larger text below the title

You should only display the submitter name if it is not same as logged-in user.

The component should only have a single property that is passed through the DOM:

<approval-request-teaser .approvalRequest=${approvalRequest}></approval-request-teaser>

Its parent element will handle actually getting the data.

below a certain pixel width, the Projected Expenses section should drop below and lose its left border. Use a container query to achieve this.

[spelkey-ucd]

One more feature request for this:

When displaying the approval status badge to an approver (not the requester or admin), I think we will want to customize what it says if status is "submitted" or "in-progress' based on where the request is in the approval chain process

• if approver has not approved, but is next in line, "Awaiting Your Approval"
• if approver has not approved, and is not next in line "Awaiting Approval By ${approverTypeLabel}
• if approver has approved, but more approvals are required "Approved by You"